Question

我正在使用tablesorter（http://tablesorter.com）jquery插件对表数据进行排序...是否有人知道是否可以在点击时更改整个列的颜色？即使不是这个插件，还有其他方式吗？

谢谢，麦克

Answer 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');

    });

  }
}

Answer 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')
        })
    })
})

而不是css（'background-color'，'yellow'）你可能想要使用toggleClass（'higlighted'）

Answer 3

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

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

请注意，您将在每个中添加一个类，而当您突出显示一行时，您只需向a添加一个类。然后在你的CSS中制定一个规则：

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

您可以动态地找出click列的类，然后在选择器中使用它，以便更容易重用。希望有道理。我还会快速检查文档，以确保这不是已经支持的内容。

Answer 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);

单击着色表列

4 个答案:

添加样式

要删除它