效果图
注意看注释！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格中的数据排序</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
border-collapse:collapse;
width:600px;
}
table td{
border:#0099FF 1px solid;
text-align:center;
}
#age:link,#age.visited {
color:#000000;
}
</style>
<script type="text/javascript">
function sortAge(){
//1.获得表格中所有的行
var table = document.getElementsByTagName("table")[0];
//table.getElementsByTagName("tr");
var rows = table.rows;
//2.创建一个新的数组,将需要排序的行装入.
var arr = [];
for(var i = 1; i< rows.length ; i ++ ){
arr[i-1] = rows[i];
}
//3.对新的数组排序
arr.sort(abc);
//4.排序好的数组遍历插回表格中.
for(var i = 0 ; i < arr.length ; i++){
table.appendChild(arr[i]);
//table中已存在的 ==》改变位置
//如果不要仅仅改变位置
//table.appendChild(arr[i].cloneNode(true));
}
}
//比较器 排序规则
function abc(a,b){
//tr.cells获得所有的单元格
return +a.cells[1].innerHTML-b.cells[1].innerHTML; //升序
//return -(+a.cells[1].innerHTML-b.cells[1].innerHTML); //降序
}
</script>
</head>
<body>
<table align="center">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortAge()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>天津</td>
</tr>
<tr>
<td>王八</td>
<td>122</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>上海</td>
</tr>
<tr>
<td>赵六</td>
<td>26</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>22</td>
<td>上海</td>
</tr>
</table>
</body>
</html>
网友评论