表格排序
1.排序需要数组,获取需要参与排序的行对象数组
2.对行数组中的每行的年龄单元格数据进行比较,并完成行对象在数组中的位置置换
3.排好序的数组重新添加回表格
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
border: blue 1px solid;
width: 500px;
border-collapse: collapse;
}
table td{
border: plum 1px solid;
padding: 5px;
}
table th{
border: plum 1px solid;
padding: 5px;
background-color: yellowgreen;
}
th a:link,th a:visited{
color: blueviolet;
text-decoration: none;
}
</style>
<script type="text/javascript">
function sortTable(){
/*
*/
//获取表格
var tableNode = document.getElementById("tableid");
//获取表格中的每一行
var trNodes = tableNode.rows;
//定义一个临时容器,存储需要排序的行对象
var trArr = [];
//遍历原行集合
for(var i=1;i<trNodes.length;i++) {
//将需要排序的行对象存储到临时容器中
trArr[i-1] = trNodes[i];
}
//对临时容器排序
mySort(trArr);
//将排序完的行对象添加到表格
for(var x=0;x<trArr.length;x++){
trArr[x].parentNode.appendChild(trArr[x]);
}
}
function mySort(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
if(arr[x].cells[1].innerHTML>arr[y].cells[1].innerHTML){
var temp = arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
</script>
</head>
<body>
<table id="tableid">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTable();">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>淮北</td>
</tr>
<tr>
<td>王五</td>
<td>46</td>
<td>合肥</td>
</tr>
<tr>
<td>李六</td>
<td>42</td>
<td>淮南</td>
</tr>
<tr>
<td>赵七</td>
<td>21</td>
<td>杭州</td>
</tr>
<tr>
<td>郭八</td>
<td>42</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
排序前:
排序后: