单击着色表列

时间:2009-12-15 03:35:48

标签: javascript jquery html css

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

谢谢, 麦克

4 个答案:

答案 0 :(得分:2)

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

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

    });

  }
}

答案 1 :(得分:1)

只要没有嵌套表,此示例将适用于大多数表。即便如此,如果您相应地选择了选择器,您也不会遇到问题。既然你已经使用了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')

答案 2 :(得分:0)

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

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

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

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

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

答案 3 :(得分:0)

可能是你可以动态改变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);