我在
highlighting even columns上看到这篇文章,但是我可以只突出显示所选列吗？
这是他们使用的代码：
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
但我想：注意：class =“highlight”将在所选列上,所以如果我选择了第3列,则class =“highlight”将从第2列中删除并添加到第3列.jQuery需要添加类基于选定的列.
<table class="tbl">
<tr>
<th class="firstColumn">
Cell 1:Heading
</th>
<th class="highlight">
Selected column so this should be highlighted
</th>
<th>
Cell 3:Heading
</th>
<th>
Cell 4:Heading
</th>
<th>
Cell 5:Heading
</th>
</tr>
<tr>
<td>
Cell 1:Row 1
</td>
<td class="highlight">
Selected column so this should be highlighted
</td>
<td>
Cell 3:Row 1
</td>
<td>
Cell 4:Row 1
</td>
<td>
Cell 5:Row 1
</td>
</tr>
<tr>
<td>
Cell 1:Row 2
</td>
<td class="highlight">
Selected column so this should be highlighted
</td>
<td>
Cell 3:Row 2
</td>
<td>
Cell 4:Row 2
</td>
<td>
Cell 5:Row 2
</td>
</tr>
</table>
解决方法
您可能需要查看
jQuery tableHover plugin来实现此目的.然后使用这样的东西
$('table.tbl').tableHover({
colClass: 'hover',clickClass: 'click',headCols: true,footCols: true
});
编辑：
像这样的东西？
Working Demo – 单击任何单元格以突出显示该列
演示代码 –
$(function() {
var rows = $('table.tbl tr');
rows.children().click(function() {
rows.children().removeClass('highlight');
var index = $(this).prevAll().length;
rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight');
});
});
