单击时着色表列答案

【问题标题】：coloring table column on click单击时着色表列
【发布时间】：2009-12-15 03:35:48
【问题描述】：

我正在使用 tablesorter(http://tablesorter.com) jquery 插件对表数据进行排序...有谁知道是否可以在单击时更改整个列的颜色？就算没有这个插件，还有别的办法吗？

谢谢，迈克

【问题讨论】：

【解决方案1】：

查看您链接到的文档，他们提到了在排序开始/停止时触发的几个触发器。通过将它们绑定到表来连接它们。

var table=$('#myTable').tablesorter();
table.bind('sortEnd', updateCells);

查看他们在示例中使用的代码，我发现已排序的标题有一个类“headerSortUp”或“headerSortDown”。从这里我们找出哪个<th> 具有这些类之一并突出显示其列单元格。

function updateCells(){
  var sortHead=$('.headerSortUp, .headerSortDown', table).get()[0],
  index=$('th', table).index(sortHead);

  if (index>=0){
    $('td', table).removeClass('selected');
    $('tr', table).each(function(){
     $('td:eq('+index+')', this).addClass('selected');

    });

  }
}

【讨论】：

【解决方案2】：

只要没有嵌套表，此示例将适用于大多数表。即便如此，如果您相应地选择了选择器，您也不会遇到问题。由于您已经在使用 jQuery 插件，我假设我也可以使用它。

$(function(){
    //you might want to be a bit more specific than only 'td', maybe 'table.classname td' or 'table#id td'
    $('td').click(function(){
        var $this = $(this);
        //find the index of the clicked cell in the row
        var index = $this.prevAll().length;
        //go back to the parent table (here you might also want to use the more specific selector as above)
        //and in each row of that table...
        $this.parents('table').find('tr').each(function(){
            //...highlight the indexth cell
            $(this).find('td:eq('+index+')').css('background-color', 'yellow')
        })
    })
})

你可能想要使用 toggleClass('higlighted') 而不是 css('background-color', 'yellow')

【讨论】：

【解决方案3】：

不熟悉这个插件，但假设每列都有一个类，你可以在点击时做这样的事情：

$("#table .column-class").addClass("highlighted");

请注意，您将为每个中的每个添加一个类，而当您突出显示一行时，您只需将一个类添加到 .然后在您的 CSS 中制定如下规则：

#table .column-class {
    background-color:;
}

您可以动态确定点击列的类，然后在选择器中使用它，以使其更易于重用。希望这是有道理的。我还会快速检查文档，以确保这不是已经支持的东西。

【讨论】：

【解决方案4】：

也许您可以动态更改 CSS 以获得 CSS 速度而不是缓慢的 DOM。

当您单击一列时，即：第 3 个
您为具有特殊背景的 'td:nth-child(3)' 添加带有 ID 的样式

然后你点击第二个。
您删除带有 ID 的样式。然后你添加了一个带有背景的样式 'td:nth-child(2)'。
以此类推。

下面是我在我们的应用中使用的源代码示例，用于动态添加样式。

添加样式

var styleNode = document.createElement("style");
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('media', 'screen'); 
styleNode.setAttribute('id', 'currentColumnStyle');
document.getElementsByTagName("head")[0].appendChild(styleNode);
if(/MSIE/.test(navigator.userAgent)){
  styleNode.styleSheet.cssText = css;
}else{
  styleNode.appendChild(document.createTextNode(css));
}

'css' 上面是一个字符串，如：td:nth-child(2){background:#FEB}

删除它

var cs = document.getElementById('currentColumnStyle');
cs && cs.parentNode.removeChild(cs);

【讨论】：