zoukankan      html  css  js  c++  java
  • 实现table单列顺反排序

    JS如下:

    var TableUtil = new Object();

    TableUtil.compareTRs = function(oTr1,oTr2)
    {
        var flag = document.getElementById("tempFlag").value;
       
        var sValue1 = oTr1.cells[0].firstChild.nodeValue;
        var sValue2 = oTr2.cells[0].firstChild.nodeValue;
       
        if(flag==0)
        {
             return sValue1.localeCompare(sValue2);        
        }
        if(flag ==1)
        {
            return -sValue1.localeCompare(sValue2);       
        }
    }

    TableUtil.sortTable = function(sTableId)
    {
        var oTable = document.getElementById(sTableId);
        var oTbody = oTable.tBodies[0];
        var colDataRows = oTbody.rows;
        var aTRs = new Array;
       
        for(var i = 0; i <colDataRows.length; i++)
        {
            aTRs[i]=colDataRows[i];
        }
       
        aTRs.sort(TableUtil.compareTRs); 
       
        var oFragment = document.createDocumentFragment();
        for(var i=0; i <aTRs.length;i++)
        {
            oFragment.appendChild(aTRs[i]);
        }
        oTbody.appendChild(oFragment);
       
        var flag = document.getElementById("tempFlag").value ;
       
        if(flag==0)
        {
            flag = 1;
        }
        else if(flag == 1)
        {
            flag = 0;
        }
        document.getElementById("tempFlag").value = flag;
    }

    HTML如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <script src="JScript1.js" type="text/javascript"></script>
    </head>
    <body>
        <table id="tblSort" border="1">
            <thead >
                <tr>
                    <th onclick="TableUtil.sortTable('tblSort')" style="cursor:pointer">Last Name</th>
                </tr>
            </thead>
           
            <tbody>
                <tr>
                    <td>Smith</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                </tr>
                <tr>
                    <td>Williams</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                </tr>
                <tr>
                    <td>Walker</td>
                </tr>
                <tr>
                    <td>Vihone</td>
                </tr>
                <tr>
                    <td>Maggie</td>
                </tr>
                <tr>
                    <td>Zhiyi</td>
                </tr>
                <tr>
                    <td>Alex</td>
                </tr>
               
            </tbody>
           
        </table>
        <input type="hidden" value="0" id="tempFlag" />
    </body>
    </html>

  • 相关阅读:
    CF1117G Recursive Queries
    P6604 [HNOI2016]序列 加强版
    高级图论
    P7708「Wdsr-2.7」八云蓝自动机 Ⅰ
    ISIJ2020 游记
    计算几何笔记 (模板)
    AC自动机学习笔记
    KMP学习笔记
    treap学习笔记
    HolyK学长的杂题选讲
  • 原文地址:https://www.cnblogs.com/vihone/p/1887280.html
Copyright © 2011-2022 走看看