php使用js对表格进行排序，phpjs表格排序

php使用js对表格进行排序，phpjs表格排序_PHP教程

php中文网

发布： 2016-07-13 16:53:54

原创

1084人浏览过

php使用js对表格进行排序，phpjs表格排序

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html" charset="utf-8">
    <title><span>sort</span> table</title>
    <style>
        *<span>{
            margin</span>:<span>0px;
            padding</span>:<span>0px;
        }
        body{
            background</span>:<span>#</span><span>ccc;</span>
<span>        }
        table{
            width</span>:<span>350px;
            margin</span>:0<span> auto;
            background</span>-color:<span>#</span><span>eee;</span>
<span>        }
        table th{
            cursor</span>:<span>hand;
            padding</span>:5px 0<span>;
            background</span>-color:<span>#</span><span>999;</span>
<span>        }
        table td{
            background</span>-color:<span>#</span><span>fff;</span>
            font-size:<span>16px;
            font</span>-weight:<span>normal;
            text</span>-align:<span>center;
            line</span>-height:<span>30px;
        }
    </span></style>
    <script language="javascript">
        <span>function</span><span> sortCells(type){
            </span><span>var</span> tbs=document.getElementsByTagName("table")[0<span>];
            </span><span>var</span> arr=<span>[];
            </span><span>var</span> arr2=<span>[];
            </span><span>for</span>(<span>var</span> i=1;i<tbs.rows.length;i++<span>){
                </span><span>var</span> text=tbs.rows[i].cells[type].<span>innerText;
                arr</span>.<span>push(text);
                arr2[text]</span>=<span>i;
            }
            </span><span>if</span>(type==0<span>){
                arr</span>.<span>sort</span>(<span>function</span>(a,b){<span>return</span> a-<span>b});
            }</span><span>else</span><span>{
                arr</span>.<span>sort</span><span>();
            }
            </span><span>var</span> temp=""<span>;

            </span><span>for</span>(<span>var</span> j=1;j<tbs.rows.length;j++<span>){
                temp</span>=tbs.rows[j].cells[0].<span>innerText;
                tbs</span>.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].<span>innerText;
                tbs</span>.rows[arr2[arr[j-1]]].cells[0].innerText=<span>temp;

                temp</span>=tbs.rows[j].cells[1].<span>innerText;
                tbs</span>.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].<span>innerText;
                tbs</span>.rows[arr2[arr[j-1]]].cells[1].innerText=<span>temp;

                temp</span>=tbs.rows[j].cells[2].<span>innerText;
                tbs</span>.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].<span>innerText;
                tbs</span>.rows[arr2[arr[j-1]]].cells[2].innerText=<span>temp;
</span><span>//</span><span>                console.log(arr2);</span>
                <span>for</span>(<span>var</span> i=1;i<tbs.rows.length;i++<span>){
                    </span><span>var</span> text=tbs.rows[i].cells[type].<span>innerText;
                    arr2[text]</span>=<span>i;
                }
            }
        }
    </span></script>
</head>
<body>
<center><span>sort</span> 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>

登录后复制