我正在使用tablesorter(http://tablesorter.com)jquery插件对表数据进行排序...是否有人知道是否可以在点击时更改整个列的颜色?即使不是这个插件,还有其他方式吗?
谢谢, 麦克
答案 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);