PHP uses js to sort tables, phpjs table sorting_PHP tutorial-PHP Tutorial-php.cn

Table of Contents

php uses js to sort tables, phpjs table sorting

Home

Backend Development

PHP Tutorial

PHP uses js to sort tables, phpjs table sorting_PHP tutorial

Jul 13, 2016 pm 04:53 PM

Data sorting

php uses js to sort tables, phpjs table sorting

&lt;!DOCTYPE&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-type" content="text/html" charset="utf-8"&gt;
    &lt;title&gt;<span>sort</span> table&lt;/title&gt;
    &lt;style&gt;
        *<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>&lt;/style&gt;
    &lt;script language="javascript"&gt;
        <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&lt;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&lt;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&lt;tbs.rows.length;i++<span>){
                    </span><span>var</span> text=tbs.rows[i].cells[type].<span>innerText;
                    arr2[text]</span>=<span>i;
                }
            }
        }
    </span>&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;<span>sort</span> table&lt;/center&gt;
&lt;table border="0"&gt;
    &lt;tr&gt;
        &lt;th onclick="sortCells(0);"&gt;序号&lt;/th&gt;
        &lt;th onclick="sortCells(1);"&gt;姓名&lt;/th&gt;
        &lt;th onclick="sortCells(2);"&gt;日期&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;BB&lt;/td&gt;
        &lt;td&gt;2015-09-12&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;CC&lt;/td&gt;
        &lt;td&gt;2015-07-12&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;AA&lt;/td&gt;
        &lt;td&gt;2015-09-11&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;DD&lt;/td&gt;
        &lt;td&gt;2015-06-12&lt;/td&gt;
    &lt;/tr&gt;

&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Statement of this Website

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