关于表格排序 - 黑马程序员技术交流社区

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<!--
@charset "utf-8";
/* CSS Document */
table{
border:#900 1px solid;
width:60%;
}
table th{
border:#900 1px solid;
background-color:#093;
}
table td{
border:#000 1px solid;
}
-->
<script type="text/javascript" src="doctool.js"></script>
<!--
// JavaScript Document
var doc = document;
function byId(id)
{
return doc.getElementById(id);
}
function byTag(name)
{
return doc.getElementsByTagName(name);
}
function byName(name)
{
return doc.getElementsByName(name);
}
-->
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序。
思路：
1，每一个人的信息是一行。
那么先将行都取出，临时存入到数组中。
2，对数组中行对象的其中一个单元格中的数据进行排序。
3，将排序后的行对象重新添加回表格对象中。
*/
function sorttab()
{
//1,获取表格中所有行对象。
var tabNode = byTag("table")[0];
//alert(tabNode.nodeName);
var trs = tabNode.rows;
//alert(trs.length);
//2，定义临时容器，将表格中需要参与排序的行对象临时存储。
var arr = new Array();
for(var x=1; x<trs.length; x++)
{
arr[x-1] = trs[x];
}
sortt(arr);
//alert(arr.length);
//var tbdNode = tabNode.childNodes[0];
var tbdNode = byTag("tbody")[0];
//alert(tbdNode.nodeName);
for(var x=0; x<arr.length; x++)
{
alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerTest);
tbdNode.appendChild(arr[x]);
}
}
function sortt(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
if(arr[x].cells[1].innerText>arr[y].cells[1].innerText)
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>23</td>
<td>广州</td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大连</td>
</tr>
<tr>
<td>孙八</td>
<td>29</td>
<td>铁岭</td>
</tr>
</table>
</body>
</html>

复制代码