html 标题自动排序,HTML排序 - 不同表格上的标题

如果你添加一些班列，使柱细胞和相关的头具有相同的类名，这不是太难以利用这些其他现有的JavaScript的解决方案。

我修改这样的HTML：

Name	Salary

Fred	$12000.00
Kevin	$191200.00

​

请注意，我游戏的标题名称和所有的细胞在该列类name-col，和我做了薪酬头和细胞，与同一类salary-col。

然后我用jQuery来点击监听器添加到name-col头，其然后引发了name-col细胞排序功能：

$('th.name-col').click(function() {

$('td.name-col').sortElements(function(a, b){

return $(a).text() > $(b).text() ? 1 : -1;

}, function(){ return this.parentNode; });

});

$('th.salary-col').click(function() {

$('td.salary-col').sortElements(function(a, b){

return $(a).text() > $(b).text() ? 1 : -1;

}, function(){ return this.parentNode; });

});

在这个例子中，sortElements是在所提供的功能上面链接的简单JQuery排序函数。我不是它的作者。

你会注意到这个脚本只会排序一次，但是，由于比较方向(>)是硬编码的。一个快速正脏来实现逻辑来扭转这种方式是这样的：

var nameAsc = false;

var salaryAsc = false;

$('th.name-col').click(function() {

$('td.name-col').sortElements(function(a, b){

if (nameAsc) {

nameAsc = false;

return $(a).text() > $(b).text() ? 1 : -1;

} else {

nameAsc = true;

return $(a).text() < $(b).text() ? 1 : -1;

}

}, function(){ return this.parentNode; });

});

$('th.salary-col').click(function() {

$('td.salary-col').sortElements(function(a, b){

if(salaryAsc) {

salaryAsc = false;

return $(a).text() > $(b).text() ? 1 : -1;

} else {

salaryAsc = true;

return $(a).text() < $(b).text() ? 1 : -1;

}

}, function(){ return this.parentNode; });

});

这里nameAsc和salaryAsc布尔变量是让您反转排列顺序的只是一个hackish的方式。如果升序，则在比较器功能中翻转布尔值和>的方向。这可能是一种更有效的方法，但我只是想要一个快速而肮脏的例子。

您的双桌模型会遇到很多问题，特别是在调整列的大小时。如果数据表中单元格中的数据较长，则数据列将不再与您的标题列对齐。我强烈建议你只使用单个表格来表示标题为和的数据。