示例-表格排序

<link rel="stylesheet" type="text/css" href="css.css" />
<style type="text/css">
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>

<script type="text/javascript" >
var flag = true;

function sortTable(){
/*
*思路：
*1、排序就需要数组。获取需要参与排序的行对象数组。
*2、对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。
*3、将排好序的数组重新添加回表格。
*/

var oTabNode = document.getElementById("info");

var collTrNodes = oTabNode.rows;

//定义一个临时容器，存储需要排序行对象。
var trArr = [];

//遍历原行集合，并将需要排序的行对象存储到临时容器中。
for(var x=1;x<collTrNodes.length;x++){
trArr[x-1]=collTrNodes[x];
}

//对临时容器排个序。
mySort(trArr);

//将排完序的行对象添加到表格；



if(flag){

for(var x=0;x<trArr.length;x++){
//alert(trArr[x].cells[1].innerHTML);
trArr[x].parentNode.appendChild(trArr[x]);
}

flag=false;

}else{

for(var x=trArr.length-1;x>=0;x--){
trArr[x].parentNode.appendChild(trArr[x]);
}

flag=true;
}



}

//排序方法
function mySort(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){

//按照年龄数值排序，并转成整数。
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
var temp =arr[x];
arr[x] = arr[y];
arr[y]=temp;
}
}
}

}

</script>

</head>

<body>

<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>zero</td>
<td>0</td>
<td>wuhan</td>
</tr>
<tr>
<td>one</td>
<td>23</td>
<td>shanghai</td>
</tr>
<tr>
<td>tow</td>
<td>24</td>
<td>guangzhou</td>
</tr>
<tr>
<td>three</td>
<td>19</td>
<td>beijing</td>
</tr>
<tr>
<td>four</td>
<td>33</td>
<td>shenzhen</td>
</tr>
<tr>
<td>five</td>
<td>42</td>
<td>dongguan</td>
</tr>
<tr>
<td>six</td>
<td>11</td>
<td>qingdao</td>
</tr>
<tr>
<td>seven</td>
<td>87</td>
<td>shouer</td>
</tr>
<tr>
<td>eight</td>
<td>28</td>
<td>zhaoqing</td>
</tr>
</table>

</body>

posted @ 2014-06-11 22:03  是但哥  阅读(154)  评论(0)    收藏  举报