6

我看到这篇关于突出显示偶数列的帖子，但我可以只突出显示选定的列吗？

这是他们使用的代码：

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

6 回答 6

17

你可能想看看jQuery tableHover 插件来实现这一点。然后使用这样的东西

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

  });
});
于 2009-07-17T14:28:20.613 回答
4

您是否考虑过使用 colgroups 而不是向每个单元格添加类？

我最近才开始亲眼看到 colgroups 的力量，它们的工作原理是这样的：

.highlight {
    background-color: yellow; 
 }
     <table id="myTable">
    	   
    	       <colgroup class="highlight"></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	   
    	    <thead>
    	       <tr>
    	           <th>header1</th>
    	           <th>header2</th>
    	           <th>header3</th>
    	           <th>header4</th>
    	           <th>header5</th>
    	       </tr>
    	    </thead>
    	    <tbody>
    	       <tr>
    	           <td>cell a</td>
    	           <td>cell b</td>
    	           <td>cell c</td>
    	           <td>cell d</td>
    	           <td>cell e</td>
    	       </tr>
        	<tbody>
     <table>

这将呈现一个包含 5 列的表格，其中 1 列具有 css 类以突出显示第一个列。所以实际上你唯一要做的就是为每个单元格的悬停添加一个函数，只需将突出显示类添加到相应的 colgroup。

您可以在这里找到完整的视频指南：表格修复标题和行+列突出显示。

*编辑了答案，因为它无关紧要，我读错了问题，并回答了完全不同的问题。（现在添加一个正确的回复）

于 2009-07-17T15:01:17.830 回答
3

这是我用来在我的桌子上添加十字准线效果的方法：

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

不过，在大桌子上似乎运行有点慢（突出显示滞后）。

于 2012-01-30T23:58:40.210 回答
1

如果您在表头中创建链接，则可以执行以下操作：

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

这会将单击的链接下方的所有单元格设置为“突出显示”类。

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

table.tbl tr .highlight {  background-color: blue; }
于 2009-07-17T14:40:24.300 回答
1

如果你想支持colspanand rowspan，那么首先你需要建立表格单元格索引，即。矩阵，用于识别每一行中的单元格位置，而不管标记如何。然后您需要跟踪所有感兴趣的表格单元格的事件并计算它们在矩阵中的偏移量以及共享垂直索引的列。

以下动画说明了生成的查找：

全表索引

我写了一个插件来触发列的wholly.mouseenter和wholly.mouseleave事件。完全。

于 2014-04-06T17:47:38.150 回答
0

您可以使用一个名为完全的插件。您可以在此处阅读有关如何集成它的完整教程 http://voidtricks.com/wholly-jquery-plugin/

于 2014-05-05T06:40:40.677 回答