jQuery仅在表中高亮显示选定列

我在上看到这篇文章，但我可以只突出显示选定的列吗

以下是他们使用的代码：

$("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>

第1单元：标题
选定列，因此应突出显示该列
第3单元：标题
第4单元：标题
第5单元：标题
单元格1：第1行
选定列，因此应突出显示该列
第3单元：第1行
第4单元：第1行
第5单元：第1行
第1单元：第2行
选定列，因此应突出显示该列
第3单元：第2行
第4单元：第2行
第5单元：第2行

要实现这一点，您可能需要看看。然后用这样的东西

$('table.tbl').tableHover({
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 

编辑：

像这样的

-单击任意单元格以突出显示该列

来自演示的代码-

$(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');

  });
});

---

如果在表标题中创建链接，可以执行以下操作：

$("table.tbl th a").click(function() {
   var colnum = $(this).closest("th").prevAll("th").length;

   $(this).closest("table").find("tr td").removeClass("highlight");
   $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight");
}

这会将单击链接下方的所有单元格设置为类“highlight”

当然，您仍然应该在CSS文件中设置正确的样式：

table.tbl tr .highlight {  background-color: blue; }

---

您是否已使用colgroups而不是将类添加到每个单元格中

我最近才开始看到colgroups的威力，它们的工作原理如下：

$("table.tbl th a").click(function() {
   var colnum = $(this).closest("th").prevAll("th").length;

   $(this).closest("table").find("tr td").removeClass("highlight");
   $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight");
}

。突出显示{
背景颜色：黄色；
}

校长1
校长2
校长3
校长4
校长5
细胞a
b单元
细胞c
d单元
细胞e

以下是我在表格中添加十字线效果时使用的方法：

$('tbody td').hover(function() {
    $(this).closest('tr').find('td,th').addClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight');
}, function() {
    $(this).closest('tr').find('td,th').removeClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight');
});

---

但是，在大型表上运行似乎有点慢（突出显示滞后）。

如果要支持

colspan

和

rowspan

，则首先需要构建表单元格索引，即识别每行中单元格位置的矩阵，而不考虑标记。然后，您需要跟踪所有感兴趣的表单元格的事件，并计算它们在矩阵和共享垂直索引的列中的偏移量

生成的查找如以下动画所示：

---

我已经编写了一个插件，可以触发列的

整体.mouseenter

和

整体.mouseleave

事件

您可以使用名为“完全”的插件。您可以在这里阅读有关如何集成它的完整教程

---

我确实喜欢tableHover插件，但实际上我希望更改表中选定列中的CSS，但我想在示例中只使用highlight。但是这个插件很快就会进入我的工作区，谢谢：）谢谢这是我需要的。你有没有可能在我的另一个问题上帮忙？我还添加了您的代码：插件工作正常，但不支持colspans-这会通过hbtw，

rows.find使其复杂化（“：n个子项…

的作用域不局限于直接子项，因此，如果每个

td

中都有一组复杂的跨度/元素，它也会拾取这些跨度/元素。您可能希望通过直接子项选择器增加特异性，如下所示：

”>：n个子项（1）“

我确实喜欢这段视频，并曾考虑过colgroups，但在我之前的尝试中无法让它们发挥作用。将把该网站添加到我的书签中，谢谢；）你有没有机会看看我的其他问题？