今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻...

一、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>
<html>
<head>
<meta charset="utf-8">
<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>

JS实现表格排序的更多相关文章

  1. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  2. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  3. 用原生js对表格排序

    阿里的模拟笔试题,当时时间有限没写出来,其实是因为自己对原生dom操作不熟悉,这里补一下. 题目的大意是有一个表格,如代码所示 <table> <tr> <th>N ...

  4. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  5. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  6. JS表格排序

    var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...

  7. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  8. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  9. javascript 表格排序和表头浮动效果(扩展SortTable)

    前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...

随机推荐

  1. extjs 箱子布局

    a.flex 配置项 flex 配置项不是设置在布局上,而是设置在子项的配置项.每个子项相对的 flex 值都会与全体子项 flex 累加的值相比较,根据此结果,处理每个子项的 flex 最后是多少. ...

  2. 在Ubuntu 14.04中安装最新版Eclipse

    1.下载eclipse从官网http://www.eclipse.org/downloads/下载Eclipse IDE for Java EE Developers的Linux版本eclipse-S ...

  3. mysql 创建索引

    完整版创建索引如下:CREATE [UNIQUE|FULLTEXT|SPATIAL] INDEX index_name [index_type] ON tbl_name (index_col_name ...

  4. java -日期

    package com.qinghuainvest.tsmarket.util; import java.text.ParseException; import java.text.SimpleDat ...

  5. Spring Security3学习实例

    Spring Security是什么? Spring Security,这是一种基于Spring AOP和Servlet过滤器的安全框架.它提供全面的安全性解决方案,同时在Web请求级和方法调用级处理 ...

  6. 【CodeForces 589F】Gourmet and Banquet(二分+贪心或网络流)

    F. Gourmet and Banquet time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  7. 【POJ 2406】Power Strings(KMP循环节)

    终于靠着理解写出KMP了,两种KMP要代码中这种才能求循环节.i-next[i]就是循环节. #include<cstdio> #define N 1000005 char s[N]; i ...

  8. php图片下载

    直接用url会在浏览器中打开图片, 想直接弹出保存框,可以用下面方法 下面的$dir指的是图片在服务器的绝对地址 function iDownload(){ $name=$_GET['name']; ...

  9. Java面试题(全)

    JAVA部分 什么是反射机制?反射机制应用(Struts中反射机制的应用) 答:运行状态中,对于任意一个类,都可以知道它的所有属性和方法,对于任意一个对象都可以调用它的任意一个方法,这种动态获取信息以 ...

  10. Java Web项目中的经典代码抽取

    前言: 众所周知的,项目开发中做得最多的无非就是增删查改(CRUD)操作.自从国内Web项目开发渐渐盛行SSH框架之后,其开发开发流程也变得更加灵活:本文就项目开发中的业务层代码作个简单的抽取,供业内 ...