DHTML技术综合演示---示例:表格排序

来源：互联网发布：域名查询腾讯编辑：程序博客网时间：2024/05/30 12:29

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>>DHTML技术综合演示---示例:表格排序</title>
<style type="text/css">
table {
border: #8080ff solid 1px;
width: 500px;
border-collapse: collapse;
}
table th {
border: #ff0000 solid 1px;
padding: 5px;
background-color: rgb(200, 200, 200);
}

table td {
border: #ff0000 solid 1px;
padding: 5px;
}
.one{
background-color:#ffff80;
}
.two{
background-color:#0080ff;
}
.over{
background-color:#80ffff;
}
</style>
</head>
<body>
<script type="text/javascript">
var bgColor;
function trColor(){
var oTable = document.getElementById("tab1");
for(var i=1;i<oTable.rows.length;i++){//第一栏不用修改
var oTr = oTable.rows[i];
if(i%2==1){
oTr.className = "one";
}else{
oTr.className="two";
};

//给当前行注册事件
oTr.onmouseover =function(){//此处要用this，
bgColor = this.className;
this.className = "over";
};
oTr.onmouseout =function(){
this.className=bgColor;
};
}
};
onload = trColor;
var isAsend = true;
function sortTable(oANode){
var oTableNode = document.getElementById("tab1");
var trRows = oTableNode.rows;

//分析:在内存中排序比较合适，因此方案：
//把行集合trRows备份到一个数组，对数组进行排序，
//最后再把排序后的数组添加到表格

//备份
var trArr=[];
for(var i=0;i<trRows.length;i++){
trArr[i-1] = trRows[i];
}
//数组排序
sortArr(trArr);

//把排序后的行数组添加回表格中并更改表头<th>中的文本
if(isAsend){
for(var i=0;i<trArr.length;i++){
trArr[i].parentNode.appendChild(trArr[i]);
}
oANode.innerHTML="年龄↑";
}else{
for(var i=trArr.length-1;i>=0;i--){
trArr[i].parentNode.appendChild(trArr[i]);
}
oANode.innerHTML="年龄↓";
}
isAsend=!isAsend;
trColor();

function sortArr(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=i+1; j<arr.length; j++){
if( parseInt(arr[i].cells[1].innerText) > parseInt(arr[j].cells[1].innerText) ){
var temp = arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
}
}

</script>
<table id="tab1">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0);" onclick="sortTable(this);">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>湖南</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>湖南</td>
</tr>
<tr>
<td>Jack</td>
<td>19</td>
<td>北京</td>
</tr>
<tr>
<td>Alice</td>
<td>23</td>
<td>New York</td>
</tr>
<tr>
<td>赵子龙</td>
<td>21</td>
<td>常山</td>
</tr>
<tr>
<td>刘备</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>张飞</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>关羽</td>
<td>24</td>
<td>上海</td>
</tr>
</table>
</body>

</html>\

原表格

正序

、

反序

0 0