js实现表格字段本地排序

来源：互联网发布：genbank数据库网址编辑：程序博客网时间：2024/05/21 08:50

一、JS代码，文件名为code.js如下：

[javascript] view plain copy
(function($){  
    //插件  
    $.extend($,{  
        //命名空间  
        sortTable:{  
            sort:function(tableId,Idx){  
                var table = document.getElementById(tableId);  
                var tbody = table.tBodies[0];  
                var tr = tbody.rows;   
          
                var trValue = new Array();  
                for (var i=0; i<tr.length; i++ ) {  
                    trValue[i] = tr[i];  //将表格中各行的信息存储在新建的数组中  
                }  
          
                if (tbody.sortCol == Idx) {  
                    trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列  
                } else {  
                    //trValue.sort(compareTrs(Idx));  //进行排序  
                    trValue.sort(function(tr1, tr2){  
                        var value1 = tr1.cells[Idx].innerHTML;  
                        var value2 = tr2.cells[Idx].innerHTML;  
                        return value1.localeCompare(value2);  
                    });  
                }  
          
                var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果  
                for (var i=0; i<trValue.length; i++ ) {  
                    fragment.appendChild(trValue[i]);  
                }  
          
                tbody.appendChild(fragment); //将排序的结果替换掉之前的值  
                tbody.sortCol = Idx;  
            }  
        }  
    });         
})(jQuery);  

二、HTML部分，主要引入JS代码与指定ID调用JS的排序方法，如下：

[html] view plain copy
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>自定义表格排序(JS)</title>  
<script type="text/javascript" src="jquery-1.4.3.js"></script>  
<script type="text/javascript" src="code.js"></script>  
<style type="text/css">  
    * {  
        padding:0;  
        margin:0;  
    }  
  
    body {  
        font-family:verdana;  
        font-size:12px;  
    }  
  
    .content {  
        width:550px;  
        margin:20px auto;  
    }  
  
    .content h1 {  
        font-family:'微软雅黑';  
        font-size:18px;  
        padding-bottom:5px;  
    }  
  
    table {  
        width:100%;  
    }  
  
    th, td {  
        padding:6px 0;  
        text-align:center;  
    }  
  
    th {  
        background-color:#007D28;  
        color:#ffffff;  
    }  
      
    tr {  
        background-color:#E8FFE8;  
    }  
      
    .odd {  
        background-color:#FFF3EE;  
    }  
      
    .highlight {  
        background-color:#FFF3EE;  
}  
  
</style>  
</head>  
  
<body>  
<table summary="user infomation table" id="tableSort">  
        <thead>  
            <tr>  
                <th onclick="$.sortTable.sort('tableSort',0)" style="cursor: pointer;">会员ID</th>  
                <th onclick="$.sortTable.sort('tableSort',1)" style="cursor: pointer;">会员名</th>  
                <th onclick="$.sortTable.sort('tableSort',2)" style="cursor: pointer;">邮箱</th>  
                <th onclick="$.sortTable.sort('tableSort',3)" style="cursor: pointer;">会员组</th>  
                <th onclick="$.sortTable.sort('tableSort',4)" style="cursor: pointer;">城市</th>  
                <th onclick="$.sortTable.sort('tableSort',5)" style="cursor: pointer;">注册时间</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>126</td>  
                <td>webw3c</td>  
                <td>este@126.com</td>  
                <td>普通会员</td>  
                <td>北京</td>  
                <td>2011-04-13</td>  
            </tr>  
            <tr>  
                <td>145</td>  
                <td>test001</td>  
                <td>test001@126.com</td>  
                <td>中级会员</td>  
                <td>合肥</td>  
                <td>2011-03-27</td>  
            </tr>  
            <tr>  
                <td>116</td>  
                <td>wuliao</td>  
                <td>wuliao@126.com</td>  
                <td>普通会员</td>  
                <td>南昌</td>  
                <td>2011-04-01</td>  
            </tr>  
            <tr>  
                <td>129</td>  
                <td>tired</td>  
                <td>tired@126.com</td>  
                <td>中级会员</td>  
                <td>北京</td>  
                <td>2011-04-06</td>  
            </tr>  
            <tr>  
                <td>155</td>  
                <td>tiredso</td>  
                <td>tireds0@126.com</td>  
                <td>中级会员</td>  
                <td>武汉</td>  
                <td>2011-04-06</td>  
            </tr>  
            <tr>  
                <td>131</td>  
                <td>javascript</td>  
                <td>js2011@126.com</td>  
                <td>中级会员</td>  
                <td>武汉</td>  
                <td>2011-04-08</td>  
            </tr>  
            <tr>  
                <td>132</td>  
                <td>jQuery</td>  
                <td>jQuery@126.com</td>  
                <td>高级会员</td>  
                <td>北京</td>  
                <td>2011-04-12</td>  
            </tr>  
        </tbody>  
    </table>  
</body>  
</html>  

0 0