仅选择HTML表中的单个列

时间：2016-03-02 03:38:06

标签： jquery html css

我需要使用鼠标指针从HTML表格中选择单个列的文本。

例如，请考虑下表。

enter image description here

在此表中，我无法单独选择姓氏列的文本。相反，在拖动鼠标时也会选择其余的表格内容。

最终目的是分别选择每一列。是否有办法在表格中选择单列文本？

尝试-moz-user-select的所有不同选项，但没有任何结果。

7 个答案:

答案 0 :(得分：7)

如果要选择列，则必须在HTML中提供该结构。这将涉及在表中使用表，如下所示： http://codepen.io/DavidvanDriessche/pen/jqbeqK

基本方法是使一个外表具有单行。此行包含所需数量的列（td）元素（虽然示例显示了三个，但可以轻松地将其调整为您想要/需要的任意数量的列。

这些td元素包含自己的表，只有行（每行都有一列）。现在可以单独选择列。

<table><tr>

    <td>
      <table>
        <tr><th>First name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Last name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Third name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>  

</tr></table>

答案 1 :(得分：1)

在您的姓氏中添加一个类并添加此css属性。

以下是jsfiddle的另一种方式。 

table, th, td {
    border: 1px solid black;
}
.unselectable {
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select:none;
	user-select: none;
}
.selectable {
    -webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	-o-user-select:all;
	user-select: all;
}
<html>
  <head>
  
  </head>
  <body>
    <h2>Add some css to lastname</h2>

    <table>
      <tr>
        <th class="unselectable">Firstname</th>
        <th class="selectable">Lastname</th>
      </tr>
      <tr>
        <td class="unselectable">Peter</td>
        <td class="selectable">Griffin</td>
      </tr>
      <tr>
        <td class="unselectable">Lois</td>
        <td class="selectable">Griffin</td>
      </tr>
     </table>
    
  </body>
</html>

答案 2 :(得分：1)

我也需要具有可选的HTML列。 @DavidvanDriessche的回答使我走上了正确的道路，但像@ Naja2Raja一样，我需要一个动态列解决方案。我相信以下PHP代码可以带您进入动态（未知）列计数解决方案。

<?php
$con=mysqli_connect("localhost","","","test");
// Check connection
if (mysqli_connect_errno())
  {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="SELECT fName,email FROM Persons ORDER BY fname";

if ($result=mysqli_query($con,$sql))
  {
    // Start an HTML table for each field
    $table0 = "<table id=\"table0\" name=\"table0\">
              <tr><th>Last Name</th></tr>
    ";

    $table1 = "<table id=\"table1\" name=\"table1\">
              <tr><th>Age</th></tr>
    ";

   // Fetch one and one row
   while ($row=mysqli_fetch_row($result))
   {
    $table0 .= "<tr><td>". $row[0] ."</td></tr>\n";
    $table1 .= "<tr><td>". $row[1] ."</td></tr>\n";
   }

// Free result set
mysqli_free_result($result);

// Close HTML table
  $table0 .= "</table>";
  $table1 .= "</table>";

// Place HTML Column Tables into Single Row HTML table with a <td> 
// column for each HTML Column Table
echo "<table><tr>
        <td>
          $table0 
        </td>
        <td>
          $table1
        <td>
      </tr></table>";

}

mysqli_close($con);
?>

答案 3 :(得分：0)

出于对齐目的，您还可以在表格中使用表格

仅限原理图：

OuterTable(
           td(leftColumnTable)/td 
           td(midColumnTable)/td
           td(rightColumnTable)/td
           )
/OuterTable

这将允许突出显示各列以及完整的表格。

答案 4 :(得分：0)

        <style>
    table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
    }

    td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
    }

    td:hover::after,
    .ff-fix:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
   }
   </style>
   <script>

    function tablefunhover() {

        var tds = document.getElementsByTagName( 'td' );

    for( var index = 0; index < tds.length; index++ ) {
        tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
    };

    var style = '<style>'
        + 'td { padding: 0 !important; }' 
        + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
        + '</style>';
    document.head.insertAdjacentHTML( 'beforeEnd', style );

    };
    tablefunhover();


   </script>
    <table>
    <tr>
        <th>Firstname</th><th>Lastname</th><th>Email</th>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>
   </table>

ref

答案 5 :(得分：0)

这个问题很老，但我并不喜欢其他答案。它们似乎比必要的更复杂。我只是分配了课程。

＆＃13;
＆＃13; 
<table>
  <tr>
    <th class="column1">Firstname</th>
    <th class="column2">Lastname</th>
  </tr>
  <tr>
    <td class="column1">Greg</td>
    <td class="column2">Smith</td>
  </tr>
  <tr>
    <td class="column1">Sam</td>
    <td class="column2">Flinstone</td>
  </tr>
 </table>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：-1)

获取第二列。 

table th:nth-child(2), table td:nth-child(2){
    background: red;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>surname</th>
  </tr>
  <tr>
    <td >Fred</td>
    <td>frankin</td>
    <td>mike</td>
  </tr>
  <tr>
    <td >Mike</td>
    <td>frankin</td>
    <td>jones</td>
  </tr>
 </table>

有边框编辑 

th, td{
  padding: .2em .5em;
}
table { border: none; border-collapse: collapse; }
table th:nth-child(2), table td:nth-child(2) { border-left: 3px solid brown; }
table th:nth-child(2), table td:nth-child(2) { border-right: 3px solid brown; }
table th:nth-child(2) { border-top: 3px solid brown; }
table tr:nth-of-type(3) td:nth-of-type(2){border-bottom: 3px solid brown;}
table td:first-child { border-left: none; }
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>surname</th>
    <th>Another</th>
  </tr>
  <tr>
    <td >Greg</td>
    <td>Fred</td>
    <td>mike</td>
    <td>Another</td>
  </tr>
  <tr>
    <td >Sam</td>
    <td>Flinstone</td>
    <td>jones</td>
    <td>Another</td>
  </tr>
 </table>

相关问题
最新问题