需求:点击表头,对表格中数据进行排序。
基本思路:
1.获取表格中所有行对象;
2.将行对象存入数组,并对数组进行排序;
3.将排完序的数组中数据重新存入表格中;
实例效果:
排序前:
排序后:
<html>
<head>
<link rel="stylesheet" href="tableData.css" />
<script type="text/javascript">
/*
表格按照年龄排序:
1.每个人的信息是一行
①先将行去除,临时存入数组中
2.对数组中的行对象的一个单元格进行排序
3.将排序后的对象重新存入表格中
*/
function sortData(){
//1.获取表格中的所有行对象
var tabNode=document.getElementsByTagName("table")[0];
var trs=tabNode.rows;
//2.定义临时容器,将表格中需要参与排序的行对象进行临时存储
//其中存储的其实都是对象的引用
var arr= new Array();
for(var x=1;x<trs.length;x++){
arr[x-1]=trs[x];
}
//3.对数组中的数据进行排序
sort(arr);
var tbNode=tabNode.childNodes[0];
// alert(tbNode.nodeName);
//4.将排完序的数组存放如表格中
for(var x=0;x<arr.length;x++){
//append是将数据往尾部添加
tbNode.appendChild(arr[x]);
}
}
function sort(arr){
for(var x=0;x<arr.length;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>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortData()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>赵倩</td>
<td>20</td>
<td>西安</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>33</td>
<td>上海</td>
</tr>
<tr>
<td>王曦</td>
<td>18</td>
<td>深圳</td>
</tr>
</table>
</body>
</html>