对页面中的table表进行排序的问题

情况如下，请大家仔细看清楚，不是一个表排序的问题。为了实现固定表头，数据可以进行上下滚动，所以我用了两个table，第一个用来存放表头，第二个表是数据，这个功能已经实现了;我现在想通过单击表头的字段，对第二个表的查询结果进行排序，请高手指点。最好有例子。谢谢大家。在线等，急!

解决方案 »

  1.   

    http://qq.ip138.com/train/heilongjiang/dongfanghong.htm
      

  2.   


    哥哥，你发的这个表头和数据都在一个table里啊
      

  3.   

    一条记录放一个表，而且记录基本不变，这太不必要了。和滚动不相关的啊，滚动是css的事。你点哪个用哪个字段排序就可以了啊。可以在链接后加两个参数，order=aaa&by=desc
      

  4.   


    何必要做成2个table？直接参考这个示例，用2组不同的标签就行了，表头用thead，内容用tbody
      

  5.   

    //搜一下jq这个方法
    $("#id").toggle(
      function () {
       //这里做操作
      },
      function () {
        //这里做操作
      }
    ); 
      

  6.   

    你试一下这个代码<html>
    <head>
    <title>Table Sort Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <script type="text/javascript">
    <!--
        //转换器，将列的字段类型转换为可以排序的类型：String,int,float
        function convert(sValue, sDataType) {
            switch(sDataType) {
                case "int":
                    return parseInt(sValue);
                case "float":
                    return parseFloat(sValue);
                case "date":
                    return new Date(Date.parse(sValue));
                default:
                    return sValue.toString();
            
            }
        }
        
        //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
        function generateCompareTRs(iCol, sDataType) {        return  function compareTRs(oTR1, oTR2) {
                        var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                        var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);                    if (vValue1 < vValue2) {
                            return -1;
                        } else if (vValue1 > vValue2) {
                            return 1;
                        } else {
                            return 0;
                        }
                    };
        }
        
        //排序方法
        function sortTable(sTableID, iCol, sDataType) {
            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];
            }
             
            //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
            if (oTable.sortCol == iCol) {
                aTRs.reverse();
            } else {
                //使用数组的sort方法，传进排序函数
                aTRs.sort(generateCompareTRs(iCol, sDataType));
            }        var oFragment = document.createDocumentFragment();
            for (var i=0; i < aTRs.length; i++) {
                oFragment.appendChild(aTRs[i]);
            }        oTBody.appendChild(oFragment);
            //记录最后一次排序的列索引
            oTable.sortCol = iCol;
        }
    //-->
    </script>
    </head>
    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th onclick="sortTable('tblSort', 0)" 
                        style="cursor:pointer">Last Name</th>
                    <th onclick="sortTable('tblSort', 1)" 
                        style="cursor:pointer">First Name</th>
                    <th onclick="sortTable('tblSort', 2, 'date')" 
                        style="cursor:pointer">Birthday</th>
                    <th onclick="sortTable('tblSort', 3, 'int')" 
                        style="cursor:pointer">Siblings</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>7/12/1978</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                    <td>10/15/1977</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                    <td>2/25/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                    <td>7/8/1980</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                    <td>7/22/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                    <td>1/14/2000</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>        
    </body>
    </html>
      

  7.   

    这个改成两上表就是楼主你要的了.<html>
    <head>
        <title>Table Sort Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />    <script type="text/javascript">
    <!--
            //转换器，将列的字段类型转换为可以排序的类型：String,int,float
            function convert(sValue, sDataType) {
                switch (sDataType) {
                    case "int":
                        return parseInt(sValue);
                    case "float":
                        return parseFloat(sValue);
                    case "date":
                        return new Date(Date.parse(sValue));
                    default:
                        return sValue.toString();            }
            }        //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
            function generateCompareTRs(iCol, sDataType) {            return function compareTRs(oTR1, oTR2) {
                    var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                    var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);                if (vValue1 < vValue2) {
                        return -1;
                    } else if (vValue1 > vValue2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
            }        //排序方法
            function sortTable(sTableID, iCol, sDataType) {
                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];
                }            //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
                if (oTable.sortCol == iCol) {
                    aTRs.reverse();
                } else {
                    //使用数组的sort方法，传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }            var oFragment = document.createDocumentFragment();
                for (var i = 0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }            oTBody.appendChild(oFragment);
                //记录最后一次排序的列索引
                oTable.sortCol = iCol;
            }
    //-->
        </script></head>
    <body>
        <p>
            Click on the table header to sort in ascending order.</p>
        <table border="1" id="" style="width:500px;">
            <thead>
                <tr>
                    <th onclick="sortTable('tblSort', 0)" style="cursor: pointer" width="25%">
                        Last Name
                    </th>
                    <th onclick="sortTable('tblSort', 1)" style="cursor: pointer"  width="25%">
                        First Name
                    </th>
                    <th onclick="sortTable('tblSort', 2, 'date')" style="cursor: pointer"  width="25%">
                        Birthday
                    </th>
                    <th onclick="sortTable('tblSort', 3, 'int')" style="cursor: pointer">
                        Siblings
                    </th>
                </tr>
            </thead>
            </table>
            <table id="tblSort" border="1" style="width:500px;">
            <tbody>
                <tr>
                    <td width="25%">
                        Smith
                    </td>
                    <td width="25%">
                        John
                    </td>
                    <td width="25%">
                        7/12/1978
                    </td>
                    <td>
                        2
                    </td>
                </tr>
                <tr>
                    <td>
                        Johnson
                    </td>
                    <td>
                        Betty
                    </td>
                    <td>
                        10/15/1977
                    </td>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                    <td>
                        Henderson
                    </td>
                    <td>
                        Nathan
                    </td>
                    <td>
                        2/25/1949
                    </td>
                    <td>
                        1
                    </td>
                </tr>
                <tr>
                    <td>
                        Williams
                    </td>
                    <td>
                        James
                    </td>
                    <td>
                        7/8/1980
                    </td>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                    <td>
                        Gilliam
                    </td>
                    <td>
                        Michael
                    </td>
                    <td>
                        7/22/1949
                    </td>
                    <td>
                        1
                    </td>
                </tr>
                <tr>
                    <td>
                        Walker
                    </td>
                    <td>
                        Matthew
                    </td>
                    <td>
                        1/14/2000
                    </td>
                    <td>
                        3
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
      

  8.   

    <script>
    function sort(obj){
        tab3.innerHTML="<table></table>";
        var sortCell = tab2.childNodes[0].cells[obj.cellIndex];
        //sort规则...
        //排序后的sortCell 
        for(var i=0;i<sortCell.length){
            tab3.childNodes[0].appendChild(tab2.childNodes[0].rows[sortCell[i].parentNode.rowIndex]);
        }
        tab2.innerHTML = tab3.innerHTML;
    }
    </script>
    </head>
    <body >
    <table id="tab1">
    <tr>
    <td onclick="sort(this)">A</td><td onclick="sort(this)">B</td><td onclick="sort(this)">C</td>
    </tr>
    </table>
    <div id="tab2">
    <table>
    <tr>
    <td>dataA1</td><td>dataB1</td><td>dataC1</td>
    </tr>
    <tr>
    <td>dataA2</td><td>dataB2</td><td>dataC2</td>
    </tr>
    <tr>
    <td>dataA3</td><td>dataB3</td><td>dataC3</td>
    </tr>
    </table>
    </div><div id="tab3" style="display: none;">
    <table ><!-- 排序的结果 -->
    </table>
    </div>
    </body>
    </html>
      

  9.   


    <html>
    <head>
    <script>
    function sort(obj){
      tab3.innerHTML="<table></table>";
      var sortCell = tab2.childNodes[0].cells[obj.cellIndex];
      //sort规则...
      //排序后的sortCell 
      for(var i=0;i<sortCell.length){
      tab3.childNodes[0].appendChild(tab2.childNodes[0].rows[sortCell[i].parentNode.rowIndex]);
      }
      tab2.innerHTML = tab3.innerHTML;
    }
    </script>
    </head>
    <body >
    <table id="tab1">
    <tr>
    <td onclick="sort(this)">A</td><td onclick="sort(this)">B</td><td onclick="sort(this)">C</td>
    </tr>
    </table>
    <div id="tab2">
    <table>
    <tr>
    <td>dataA1</td><td>dataB1</td><td>dataC1</td>
    </tr>
    <tr>
    <td>dataA2</td><td>dataB2</td><td>dataC2</td>
    </tr>
    <tr>
    <td>dataA3</td><td>dataB3</td><td>dataC3</td>
    </tr>
    </table>
    </div><div id="tab3" style="display: none;">
    <table ><!-- 排序的结果 -->
    </table>
    </div>
    </body>
    </html>