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

【问题标题】：How to highlight an HTML table column without using loops?如何在不使用循环的情况下突出显示 HTML 表格列？
【发布时间】：2012-02-06 03:20:21
【问题描述】：

我有一张这样的桌子：

<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.. em> 并使用 2 个单独的语句？

【问题讨论】：

我不认为你可以不循环，但是你可以使用jquery.each方法来简化你的代码。

标签： jquery html loops html-table syntax-highlighting

【解决方案1】：

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

tr:nth-child(odd)

和

tr:nth-child(even)

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

【讨论】：

是的，我也想过这个。但它需要覆盖IE7,8，所以如果有人想出另一个非循环解决方案，我会再等一会儿。如果没有，你会得到支票。到目前为止，谢谢。
在这种情况下，也许您可以通过执行以下操作来简化： $('input.some:nth-child(odd)').toggleClass('oddHigh');和偶数类类似？

【解决方案2】：

您可能想查看:even 和:odd jQuery 伪选择器。 :D

【讨论】：