急找一个利用JavaScript对页面上生成的表格进行排序的js源代码。

Leemaasn 2006-02-20 10:04:29
我的页面上已经有一个生成的html-table,现在想在该基础上,利用js对该表格实现排序功能。
也就是说,点表头上某一列,就能将整个表格按照该列进行升序或者降序的排列。

有这样现成的js源代码吗?
...全文
255 点赞 收藏 13
写回复
13 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
wizardblue 2006-02-21
楼主去看下这个
http://www.houseofscripts.com/scripts/javascripts/sorttable.htm
回复
TinyJimmy 2006-02-21
楼上的不通用
上上楼的通用, 但不好使

学习ing
回复
fog628 2006-02-21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sort table</title>
</head>

<script>
<!--
var flag1, flag2, flag3;
flag1 = true;
flag2 = true;
flag3 = true;

//clear rows for table
function clearAllRows(oTable){
for(var i = oTable.rows.length - 1; i > 0; i--){
oTable.deleteRow(i);
}
}
function addRows(oTable, Person){
var rowid = oTable.rows.length;
var row = oTable.insertRow(rowid);

var cell=row.insertCell();
cell.innerText = Person.getId();

var cell = row.insertCell();
cell.innerHTML = Person.getName();

var cell=row.insertCell();
cell.innerHTML=Person.getAge();
}
function sortBy(index){
var oTable = document.getElementById("t1");
//get data from table
var arr = new Array();

//skip the first row, because it is the head of the table
for(var i = 1; i < oTable.rows.length; i++){
var id = oTable.rows[i].cells[0].innerText;
var name = oTable.rows[i].cells[1].innerText;
var age = oTable.rows[i].cells[2].innerText;

arr[i - 1] = new Person(id, name, age);
}

//process sort
switch(index){
case 0: if(flag1){
//sort ascending
arr.sort(function(a, b){
return parseInt(a.getId()) - parseInt(b.getId());
});
flag1 = false;
}else{
//sort desc
arr.sort(function(a, b){
return parseInt(b.getId()) - parseInt(a.getId());
});
flag1 = true;
}
break;
case 1: if(flag2){
arr.sort();
flag2 = false;
}else{
arr.sort();
arr.reverse();
flag2 = true;
}
break;
case 2: if(flag3){
arr.sort(function(a, b){
return parseInt(a.getAge()) - parseInt(b.getAge());
});
flag3 = false;
}else{
arr.sort(function(a, b){
return parseInt(b.getAge()) - parseInt(a.getAge());
});
flag3 = true;
}
break;
}

//clear the all rows except the head of the table
clearAllRows(oTable);

//add the rows
for(var i = 0; i < arr.length; i++){
addRows(oTable, arr[i]);
}

}
function Person(id, name, age){
this.id = id;
this.name = name;
this.age = age;
}
new Person('', '', '');
Person.prototype.getId = function() { return this.id;}
Person.prototype.getName = function() { return this.name;}
Person.prototype.getAge = function() { return this.age;}
Person.prototype.toString = function() { return this.name;}

-->
</script>
<body style="font-size:12px ">
<table width="200" border="1" id="t1">
<tr>
<td><a href="javascript:sortBy(0)">Id</a></td>
<td><a href="javascript:sortBy(1)">Name</a></td>
<td><a href="javascript:sortBy(2)">Age</a></td>
</tr>
<tr>
<td>1</td>
<td>fog628</td>
<td>108</td>
</tr>
<tr>
<td>2</td>
<td>tom</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>jennifer</td>
<td>58</td>
</tr>
<tr>
<td>4</td>
<td>jessica</td>
<td>22</td>
</tr>
</table>

</body>
</html>
回复
infowain 2006-02-21
http://catkin.blog.a8.com/article/content.aspx?articleid=7444
回复
doway 2006-02-21
不会很难,但真写起来也得费点劲。提示一个:

用数组或 XML 保存表格内容,表格不要在服务器端生成,在页面中用 JS 动态生成,点击事件中重新计算并生成表格。

更简单的办法是向服务器重新请求。
回复
tim90 2006-02-21
好多**
回复
执假以为真 2006-02-21
两颗星,三颗星,四颗星!好帅啊!
我要变成一个小太阳!
回复
mousefog 2006-02-21
去www.51js.com看看
回复
kingofhawks 2006-02-21
****************************闪闪*****************
回复
BillyW 2006-02-21
你应该到javascript区搜一下,以前有这样的问题。

如果没找到可能是你的关键字不对
回复
pigo 2006-02-20

http://www.google.com/search?q=sortabletable

支持楼上的bs!!!

回复
jFresH_MaN 2006-02-20
根本不是散分,BS呆鸟
又在晃点我了~~
回复
jFresH_MaN 2006-02-20
o ?
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2006-02-20 10:04
社区公告
暂无公告