jQuery仅在表格中突出显示所选列

我在 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');

  });
});

原文地址：https://www.jb51.cc/jquery/181423.html