今天有点闲，写个小东西，使用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. Android性能优化文章转载

    今天看到几篇比较好的文章就转了!(链接如下) 转载注明出处:Sunzxyong Android性能优化之Bitmap的内存优化 Android性能优化之常见的内存泄漏 Android最佳实践之Syst ...

  2. 运维mysql基础

    1 mysql简介 一般写某个东西先介绍一下,我就老生常谈的简单介绍下(摘自维基百科) https://zh.wikipedia.org/wiki/MySQL MySQL(官方发音为英语发音:/maɪ ...

  3. 详解jQ的support模块

    jQuery的属性support是判断浏览器之间是否兼容的模块 ,该模块包含了leadingWhitespace,tbody,htmlSerialize,style,hrefNormalized,op ...

  4. nodeJS+express+Jade写一个局域网聊天应用(node基础)

    为了复习一下nodeJS, 而且socketIO这东西听起来就好高端有木有, 而且有人写过了open, 也可以作为自己的参考有木有, 点击下载源代码: express是4.x的版本, 跟以前的配置有些 ...

  5. Web前端性能优化教程08：配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  6. Python爬虫基础知识入门一

    一.什么是爬虫,爬虫能做什么 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.比如它在抓取一个网 ...

  7. Leetcode 257. Binary Tree Paths

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...

  8. 【BZOJ-3052】糖果公园 树上带修莫队算法

    3052: [wc2013]糖果公园 Time Limit: 200 Sec  Memory Limit: 512 MBSubmit: 883  Solved: 419[Submit][Status] ...

  9. 【bzoj3295】 Cqoi2011—动态逆序对

    http://www.lydsy.com/JudgeOnline/problem.php?id=3295 (题目链接) 题意 给出某种排列,按照某种顺序依次删除m个数,在每次删除一个数前统计序列中逆序 ...

  10. Linux修改密码passwd用法

    语法: passwd [-k] [-l] [-u [-f]] [-d] [-S] [username] 必要参数:-d 删除密码-f 强制执行-k 更新只能发送在过期之后-l 停止账号使用-S 显示密 ...