Dom编程（表格排序）

来源：互联网发布：php是什么软件编辑：程序博客网时间：2024/06/05 05:28
表格排序：

<!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><style type="text/css">table{width:360px;border:thin solid #33C;}tr{height:30px;}td{border:thin solid #30C;text-align:center;line-height:30px;}th{background-color:#09C;border:thin solid #30C;line-height:30px;}</style><script type="text/javascript">var tag = true;function ageSort(){var tableNode = document.getElementsByTagName("table")[0];var rows = tableNode.rows;var arr = new Array(); //将行的引用存入数组中for(var x=1; x<rows.length; x++){arr[x-1] = rows[x];}sortArrToAge(arr);if(tag){for(var x=0; x<arr.length; x++){tableNode.tBodies[0].appendChild(arr[x]);}tag = false;}else{for(var x=arr.length-1; x>=0; x--){tableNode.tBodies[0].appendChild(arr[x]);}tag = true;}}function sortArrToAge(arr){for(var x=0; x<arr.length; x++){for(var y=x+1; y<arr.length; y++){if(parseInt(arr[x].cells[1].innerText) > parseInt(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="ageSort()">年龄</a></th>        <th>所在地</th>    </tr>    <tr>        <td>张三</td>        <td>38</td>        <td>上海</td>    </tr>    <tr>        <td>李四</td>        <td>4</td>        <td>广东</td>    </tr>    <tr>        <td>王五</td>        <td>46</td>        <td>桂林</td>    </tr>    <tr>        <td>周七</td>        <td>27</td>        <td>陕西</td>    </tr>    <tr>        <td>赵六</td>        <td>56</td>        <td>武汉</td>    </tr>    <tr>        <td>康八</td>        <td>31</td>        <td>四川</td>    </tr></table></body></html>
效果图：

0 0