【实例】表格排序

来源：互联网发布：苏州工商网络监管网编辑：程序博客网时间：2024/06/17 00:42

表格排序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script type="text/javascript">function sorttab() {var tableRows = new Array();for(var i = 1; i < document.getElementsByTagName("table")[0].rows.length; i++) {tableRows[i-1] = document.getElementsByTagName("table")[0].rows[i];}sortt(tableRows);for(var x = 0; x < tableRows.length; x++) {document.getElementsByTagName("table")[0].childNodes[1].appendChild(tableRows[x]);

<span style="white-space:pre"></span>//这一句很重要}}function sortt(arr) {for(var i = 0; i < arr.length; i++) {for(var j = 0; j < i; j++) {if(parseInt(arr[i].cells[1].innerHTML) > parseInt(arr[j].cells[1].innerHTML) {var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}}}</script><style type="text/css">table {border:1px black solid;}td, th {border:1px black solid;}th {background-color:#B0FFB0;font-weight:bold;}</style></head><body><table><tr>    <th>        姓名        </th>        <th>        <a href="javascript:void(0)" onClick="sorttab();">年龄</a>        </th>        <th>        地址        </th>    </tr>    <tr>    <td>张三</td>        <td>30</td>        <td>北京</td>     </tr>    <tr>    <td>李四</td>        <td>20</td>        <td>上海</td>     </tr>    <tr>    <td>王五</td>        <td>28</td>        <td>广州</td>     </tr>     <tr>    <td>李六</td>        <td>22</td>        <td>深圳</td>     </tr>     <tr>    <td>孙七</td>        <td>43</td>        <td>台北</td>     </tr>     <tr>    <td>赵八</td>        <td>19</td>        <td>南昌</td>     </tr></table><div id="console"></div></body></html>

这是一个通过点击表格中年龄那一栏的表头来触发排序的。值得我们注意的是，在sorttab方法中的我做了注释的句子，那一句是appendChild的，就是把排好序的表格放回原始表格，因为放回的是每一行的引用，所以原来的那个旧序的引用就被覆盖掉了，而不至于出现两个表格（我在代码中可没有删除原表格的东东哦）

0 0