如何在不使用循环的情况下突出显示 HTML 表格列？
我有一个像这样的表：
<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 个单独的语句？
I have a table like this:
<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>
Odd and even rows have different highlight classes oddHigh and evenHigh.
On click of the column header I want to highlight the column like this:
$(".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);
});
This highlights the whole column with oddHigh.
Is there a way to highlight depending on the class of the closest row WITHOUT looping through the whole selection? Or do I need to set colOdd to tr.odd td... and colEven to tr.even td.. and use 2 separate statements?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您的浏览器支持，您可以使用 css
:even和:oddcss 伪类选择器。另请
参阅 http://caniuse.com/#search=nth-child 了解兼容性。 （不支持 IE 6、7、8）
You can use the css
:evenand:oddcss pseudo-class selectors if your browser supports them. alsoand
see http://caniuse.com/#search=nth-child for compatibility. (no IE 6,7,8)
您可能想查看
:even和:oddjQuery 伪选择器。 ：DYou might want to look at the
:evenand:oddjQuery pseudo-selectors. :D