爱程序网

php使用js对表格进行排序

来源: 阅读:

<!DOCTYPE><html><head>    <meta http-equiv="Content-type" content="text/html" charset="utf-8">    <title>sort table</title>    <style>        *{            margin:0px;            padding:0px;        }        body{            background:#ccc;        }        table{            width:350px;            margin:0 auto;            background-color:#eee;        }        table th{            cursor:hand;            padding:5px 0;            background-color:#999;        }        table td{            background-color:#fff;            font-size:16px;            font-weight:normal;            text-align:center;            line-height:30px;        }    </style>    <script language="javascript">        function sortCells(type){            var tbs=document.getElementsByTagName("table")[0];            var arr=[];            var arr2=[];            for(var i=1;i<tbs.rows.length;i++){                var text=tbs.rows[i].cells[type].innerText;                arr.push(text);                arr2[text]=i;            }            if(type==0){                arr.sort(function(a,b){return a-b});            }else{                arr.sort();            }            var temp="";            for(var j=1;j<tbs.rows.length;j++){                temp=tbs.rows[j].cells[0].innerText;                tbs.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].innerText;                tbs.rows[arr2[arr[j-1]]].cells[0].innerText=temp;                temp=tbs.rows[j].cells[1].innerText;                tbs.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].innerText;                tbs.rows[arr2[arr[j-1]]].cells[1].innerText=temp;                temp=tbs.rows[j].cells[2].innerText;                tbs.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].innerText;                tbs.rows[arr2[arr[j-1]]].cells[2].innerText=temp;//                console.log(arr2);                for(var i=1;i<tbs.rows.length;i++){                    var text=tbs.rows[i].cells[type].innerText;                    arr2[text]=i;                }            }        }    </script></head><body><center>sort table</center><table border="0">    <tr>        <th onclick="sortCells(0);">序号</th>        <th onclick="sortCells(1);">姓名</th>        <th onclick="sortCells(2);">日期</th>    </tr>    <tr>        <td>2</td>        <td>BB</td>        <td>2015-09-12</td>    </tr>     <tr>        <td>3</td>        <td>CC</td>        <td>2015-07-12</td>    </tr>     <tr>        <td>1</td>        <td>AA</td>        <td>2015-09-11</td>    </tr>     <tr>        <td>4</td>        <td>DD</td>        <td>2015-06-12</td>    </tr></table></body></html>

相关文章列表:
关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助