81,122
社区成员
发帖
与我相关
我的任务
分享急找一个利用JavaScript对页面上生成的表格进行排序的js源代码。
我的页面上已经有一个生成的html-table，现在想在该基础上，利用js对该表格实现排序功能。
也就是说，点表头上某一列，就能将整个表格按照该列进行升序或者降序的排列。
有这样现成的js源代码吗？
也就是说，点表头上某一列，就能将整个表格按照该列进行升序或者降序的排列。
有这样现成的js源代码吗？
...全文
请发表友善的回复…
发表回复
wizardblue 2006-02-21
- 打赏
- 举报
楼主去看下这个
http://www.houseofscripts.com/scripts/javascripts/sorttable.htm
http://www.houseofscripts.com/scripts/javascripts/sorttable.htm
TinyJimmy 2006-02-21
- 打赏
- 举报
楼上的不通用
上上楼的通用, 但不好使
学习ing
上上楼的通用, 但不好使
学习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>
"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 动态生成，点击事件中重新计算并生成表格。
更简单的办法是向服务器重新请求。
用数组或 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 ?
