jQuery仅在表中突出显示所选列 [英] jQuery highlighting selected columns only in a table

问题描述

我在突出显示偶数列上看到此信息，但我可以

这里是他们使用的代码：

  $（table.Table22> tbody> tr> td：nth-​​child（even））。css（background，blue）; 
  

但我想：注意： class =highlight code>将在选定的列上，所以如果我选择列3， class =highlight将从列2中删除并添加到列3。需要根据所选列添加类。

 < table class =tbl> 
< tr> 
< th class =firstColumn> 
 Cell 1：Heading 
< / th> 
< th class =highlight> 
选中的列，因此应高亮显示
< / th> 
< th> 
 Cell 3：Heading 
< / th> 
< th> 
 Cell 4：Heading 
< / th> 
< th> 
 Cell 5：Heading 
< / th> 
< / tr> 
< tr> 
< td> 
单元格1：第1行
< / td> 
< td class =highlight> 
选中的列，因此应高亮显示
< / td> 
< td> 
单元格3：第1行
< / td> 
< td> 
单元格4：第1行
< / td> 
< td> 
单元格5：第1行
< / td> 
< / tr> 
< tr> 
< td> 
单元格1：第2行
< / td> 
< td class =highlight> 
选中的列，因此应高亮显示
< / td> 
< td> 
单元格3：第2行
< / td> 
< td> 
单元格4：第2行
< / td> 
< td> 
单元格5：第2行
< / td> 
< / tr> 
< / table> 
  




解决方案

您可能想看看 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 ; 
 rows.find（'：nth-​​child（'+（index + 1）+'）'）addClass（'highlight'）; 
 
}）; 
 }）; 
  
 
I see this post on highlighting even columns but can I highlight only selected columns?

Here is the code they use:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
But I would like: NOTE: the class="highlight" will be on the selected columns, so if I selected column 3 the class="highlight" would be removed from column 2 and added to column 3. jQuery needs to add the class based on selected column.
<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>

解决方案
You might want to take a look at jQuery tableHover plugin to achieve this. Then use something like this
$('table.tbl').tableHover({
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 
EDIT:

Something like this?

Working Demo -  Click on any cell, to highlight the column

Code from 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');

  });
});


                        
这篇关于jQuery仅在表中突出显示所选列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！