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

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个单独的语句？

- frequent

---

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

Answer 1

你可以使用CSS的伪类选择器:even和:odd，如果你的浏览器支持它们。

tr:nth-child(odd)

并且。

tr:nth-child(even)

请查看 http://caniuse.com/#search=nth-child 以了解兼容性情况。(不支持IE 6、7、8)

- c4urself

---

是的，我也考虑过这个问题。但它需要覆盖IE7、8，所以我会再等一段时间，看看是否有其他非循环解决方案出现。如果没有，你就可以拿到支票了。到目前为止，谢谢你。 - frequent

在这种情况下，也许你可以简化操作，像这样：$('input.some:nth-child(odd)').toggleClass('oddHigh'); 并且类似于偶数的类？ - c4urself

Answer 2

你可能需要查看 jQuery 伪选择器 :even 和 :odd。:D

- Richard Neil Ilagan