23、HTML表格排序

junJZ_2008

浏览: 1344549 次
性别:
来自: 湖南澧縣

最近访客更多访客>>

fushangan

xiaoyuer9953

qq234766237

coollyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

HTML 脚本算法 JavaScript

脚本

/*
* 常用三种类型转换(int float date string)：
* sValue 要转换的值
* sDataType 要转换的值的类型
*/
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) {
	/*真真的比较函数，供数组的sort方法调用，oTR1 oTR2两个参数由sort方法传进来
	oTR1为比较的第一行，oTR2为比较的第二行*/
	return function compareTRs(oTR1, oTR2) {
		var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
		var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
		//按升序比较，如果是日期类型时会自动调用其valueOf方法返date 的毫秒再进行比较
		if (vValue1 < vValue2) {
			return -1;
		} else {
			if (vValue1 > vValue2) {
				return 1;
			} else {
				return 0;
			}
		}
	};
}
/*
* 表格比较，由HTML点击事件调用
* sTableID 要比较的表格id
* iCol 要较的表格的列的编号
* sDataType 列的数据类型
*/
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];
	}
	/*sortCol为表格的扩展属性，标示最后是根据哪列来进行排序的。
	如果要传进来的列与上次排序的列是同一列时，直接对数组进行
	reverse反序操作，这样排序的速度会更快*/
	if (oTable.sortCol == iCol) {
		aTRs.reverse();
	} else {
	//如果是第一次排序，则调用排序算法进行排序
		aTRs.sort(generateCompareTRs(iCol, sDataType));
	}
	       				
	//创建文档碎片，这样不用一个一个把行添加到表格对象中，而是一次就可以了
	var oFragment = document.createDocumentFragment();
	for (var i = 0; i < aTRs.length; i++) {
		oFragment.appendChild(aTRs[i]);
	}
	      
	//把所排序的行重样追加到表格对象中，注：这里没有单独先删除表格排序前的行
	//因为如果追加的行是一样的话，appendChild操作会先自动删除后再添加。
	oTBody.appendChild(oFragment);
	oTable.sortCol = iCol;
}

HTML演示代码

<html>
    <head>
	<title>Table Sort Example</title>
        <script type="text/javascript">
        		//实现脚本如上面所示......
        </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>

分享到：

24、JavaScript错误处理与调试工具 | 22、表单和数据的完整性

2009-10-02 07:21
浏览 2221
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

23、HTML表格排序

脚本

HTML演示代码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

23、HTML表格排序

脚本

HTML演示代码

评论

发表评论

相关推荐

HTML、JS、JSON特殊字符

HTML — HTTP URL 中的特殊字符

HTML — CSS选择器

部分解决JsUnit无法在firefox3、safari 测试的问题

JsUnit——eclipse插件（四）

10、JavaScript跨浏览器需注意的问题——ajax基础笔记

JsUnit详解——Web服务方式（三）

JsUnit详解——《ajax基础》笔记（二）

JsUnit详解——《ajax基础》笔记（一）

使用Firefox的Web开发插件

9、访问WEB服务(REST)——ajax基础笔记

8、读取响应头部——ajax基础笔记

7、使用JSON向服务器发送数据——ajax基础笔记

6、请求参数作为XML发送——ajax基础笔记

4、将使用W3C DOM动态生成页面——ajax基础笔记

3、将响应解析为XML——ajax基础笔记

2、使用innerHTML属性创建动态内容——ajax基础笔记

1、使用XMLHttpRequest对象——ajax基础笔记

30、JavaScript代码优化

JavaScript代码优化（二）

最近访客更多访客>>