jQuery突出显示只在一个表中的选定列

Question

我看到这篇文章在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> 

Answer 1

您可能想看看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'); 

    }); 
}); 

Answer 2

，你可以做这样的事情：

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

Answer 3

有你concidered使用colgroups，而不是添加类的每一个细胞？

我最近才开始看colgroups的力量自己，他们的工作是这样的：

.highlight { 
 
    background-color: yellow; 
 
}

 <table id="myTable"> 
 
    \t  
 
    \t  <colgroup class="highlight"></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  
 
    \t  <thead> 
 
    \t  <tr> 
 
    \t   <th>header1</th> 
 
    \t   <th>header2</th> 
 
    \t   <th>header3</th> 
 
    \t   <th>header4</th> 
 
    \t   <th>header5</th> 
 
    \t  </tr> 
 
    \t  </thead> 
 
    \t  <tbody> 
 
    \t  <tr> 
 
    \t   <td>cell a</td> 
 
    \t   <td>cell b</td> 
 
    \t   <td>cell c</td> 
 
    \t   <td>cell d</td> 
 
    \t   <td>cell e</td> 
 
    \t  </tr> 
 
     \t <tbody> 
 
    <table>

这会使一个表，5列，其中1列有CSS类突出显示第一列。所以实际上你必须做的唯一事情就是在每个单元格的悬停中添加一个函数，只需将高亮类添加到相应的colgroup即可。

有一个完整的videoguide你可以找到合适的位置：table fix header, and row + column highlighting.

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

Answer 4

这是我使用的加入十字会影响到我的表：

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

似乎运行有点慢上大表虽然（高亮滞后）。

Answer 5

如果你想支持colspan和rowspan，那么首先你需要建立表格单元格索引，即。矩阵，可以识别每一行中的细胞定位，而不考虑标记。然后，您需要跟踪所有感兴趣的表格单元格的事件，并计算矩阵中的偏移量和共享垂直索引的列。

所得查找在下面的动画所示：

我已经写触发对列的wholly.mouseenter和wholly.mouseleave事件的插件。 Wholly。

Answer 6

您可以使用完全调用的插件。你可以阅读完整的教程，如何在这里集成它 http://voidtricks.com/wholly-jquery-plugin/