如何在不使用循环的情况下突出显示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>

奇数和偶数行有不同的高亮类奇数高和高.

单击列标题我想突出显示如下列:

$(".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和:oddcss伪类选择器.也

tr:nth-child(odd)

和

tr:nth-child(even)

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