Question

我有一张这样的表：

<table>
  <thead>
    <tr>
     <th id="col-1"><input type="button" class="some" value="Company" /></th>
     <th>name</th>
     <th>Adress</th>
     <th>Zip</th>
     <th>Place</th>
     <th>Country</th>
    </tr>
   </thead>
   <tbody>
    <tr class="even">
     <td headers="col-1">Some ltd</td>
     <td>some name</td>
     <td>some street</td>
     <td>some zip</td>
     <td>some town</td>
     <td>some country</td>
    </tr>
    <tr class="odd">
     <td headers="col-1">Corp</td>
     <td>some name</td>
     <td>some street</td>
     <td>some zip</td>
     <td>some town</td>
     <td>some country</td>
    </tr>
   </tbody>
 </table>

奇数和偶数行有不同的高亮类 oddHigh 和 evenHigh 。

点击列标题后，我想突出显示如下列：

$(".some").live("click", function() {
   var val = $(this).closest("TH, th").attr('id'),
       col = $( "td[headers="+ val +"]" ),
       // set odd/even
       i = col.closest("TR, tr").hasClass("odd") ? "oddHigh" : "evenHigh";

   col.hasClass("colHigh") ? col.removeClass("colHigh "+i) : col.addClass("colHigh "+i);
   });

这会使用 oddHigh 突出显示整个列。

有没有办法根据最接近的行的类来突出显示而不循环整个选择？或者我是否需要将 colOdd 设置为 tr.odd td ... 和 colEven 到 tr.even td .. 并使用2个单独的语句？

Answer 1

如果您的浏览器支持，您可以使用css :even和:odd css伪类选择器。还

tr:nth-child(odd)

和

tr:nth-child(even)

请参阅http://caniuse.com/#search=nth-child了解兼容性。（没有IE 6,7,8）

Answer 2

您可能希望查看:even和:odd jQuery伪选择器。：d

如何在不使用循环的情况下突出显示HTML表格列？

2 个答案: