Home >Backend Development >PHP Tutorial >PHP uses js to sort tables, phpjs table sorting_PHP tutorial

PHP uses js to sort tables, phpjs table sorting_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-07-13 16:53:541035browse

php uses js to sort tables, phpjs table sorting

<!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>

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1053794.htmlTechArticlephp uses js to sort tables, phpjs table sorting! DOCTYPEhtmlhead meta http-equiv="Content-type" content ="text/html" charset="utf-8" title sort table/title style * { margin : 0...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn