(11)按年龄对每行数据进行排序
按年龄对每行数据进行排序
重点理解:
for(var k=0;k<arr.length;k++)
{
arr[x].parentNode.appendChild(arr[k]);
}
数组存的数据也是引用,即地址。因为dom树的存在,所以根据这个地址可以找到其父节点,然后添加入表格中
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function sortTable()
{
//获取待排序的表格对象
var TabNode=document.getElementById("Tabid");
//获取数据行集合
var TrNodes=TabNode.rows;
//定义临时容器,存储需要排序的行独享
var arr=[];
for(var i=1;i<TrNodes.length;i++)
{
arr[i-1]=TrNodes[i];
}
//对数组中的年龄属性进行排序
for(var x=arr.length-1;x>0;x--)
{
for(var y=0;y<x;y++)
{
var TdNode1=arr[y].getElementsByTagName("td")[1];
var TdNode2=arr[y+1].getElementsByTagName("td")[1];
//alert(TdNode1.innerHTML+"---"+TdNode2.innerHTML)
if(TdNode1.innerHTML>TdNode2.innerHTML)
{
var TempNode=arr[y];
arr[y]=arr[y+1];
arr[y+1]=TempNode;
}
}
}
//将排完序的数组放入到表格中
for(var k=0;k<arr.length;k++)
{
arr[x].parentNode.appendChild(arr[k]);
}
}
</script>
</head>
<body>
<table id="Tabid">
<tr >
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr >
<tr >
<td>张三</td>
<td>20</td>
<td>北京</td>
</tr>
<tr >
<td>李四</td>
<td>19</td>
<td>南京</td>
</tr>
<tr >
<td>王五</td>
<td>28</td>
<td>上海</td>
</tr>
<tr >
<td>赵六</td>
<td>71</td>
<td>大连</td>
</tr>
</table>
</body>
</html>