一、JS代码,文件名为code.js如下:
- (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的排序方法,如下:
- <!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>