javascript table 表格排序

最新推荐文章于 2018-08-27 11:53:38 发布
最新推荐文章于 2018-08-27 11:53:38 发布
阅读量146 收藏
点赞数
分类专栏： javascript 文章标签： javascript html ViewUI
在功能上实现了对表格不同内容的升序和降序的排序，内容可能是字符串，int类型，日期类型，float类型等。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>对单列表格进行排序</title>
		<meta name="generator" content="Studio 3 http://aptana.com/">
		<meta name="author" content="Administrator">
		<script type="text/javascript" src="js/test3.js"></script>
	</head>
	<body>
		<table border="1" id="tblsort">
			<thead>
				<tr>
					<th onclick="table.sortTable('tblsort',0)" style="cursor: pointer">Last Name</th>
					<th onclick="table.sortTable('tblsort',1)" style="cursor: pointer">First Name</th>
					<th onclick="table.sortTable('tblsort',2,'int')" style="cursor: pointer">Age</th>
					<th onclick="table.sortTable('tblsort',3,'date')" style="cursor: pointer">Birth Day</th>
					<th onclick="table.sortTable('tblsort',4,'float')" style="cursor: pointer">Pay</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Adam</td>
					<td>Jack</td>
					<td>26</td>
					<td>1/12/1977</td>
					<td>3000.12</td>
				</tr>
				<tr>
					<td>Smith</td>
					<td>Lucy</td>
					<td>28</td>
					<td>6/12/1975</td>
					<td>4000.23</td>
				</tr>
				<tr>
					<td>Johnson</td>
					<td>Lily</td>
					<td>35</td>
					<td>07/12/1965</td>
					<td>5000.03</td>
				</tr>
				<tr>
					<td>Williams</td>
					<td>Pual</td>
					<td>25</td>
					<td>12/08/1984</td>
					<td>5000.56</td>
				</tr>
				<tr>
					<td>Gilliam</td>
					<td>Jack</td>
					<td>45</td>
					<td>6/4/1953</td>
					<td>10000</td>
				</tr>
				<tr>
					<td>Bill</td>
					<td>Hamson</td>
					<td>36</td>
					<td>9/8/1971</td>
					<td>8000</td>
				</tr>
				<tr>
					<td>Mowen</td>
					<td>Alex</td>
					<td>10</td>
					<td>11/12/2000</td>
					<td>6000</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>



/**
 * @author Administrator
 */
table = {
	compareTRS : function (otr1, otr2) {
		var value1 = otr1.cells[0].firstChild.nodeValue;
		var value2 = otr2.cells[0].firstChild.nodeValue;
		return value1.localeCompare(value2);
	},
	sortTable : function (tableId,col,datatype) {
		var otable = document.getElementById(tableId);
	    var tbody = otable.tBodies[0];
		var colDataRows = tbody.rows;
		var trs = [];

		for (var i=0; i < colDataRows.length; i++) {
			trs.push(colDataRows[i]);
		};

		if (otable.sortCol == col) {
			trs.reverse();
		} else {
			trs.sort(table.generateCompareTRS(col, datatype));	
		}

		var fragment = document.createDocumentFragment();
		for (var i=0; i < trs.length; i++) {
		  fragment.appendChild(trs[i]);
		};
		tbody.appendChild(fragment);
		otable.sortCol = col;
	},
	generateCompareTRS : function (col, datatype) {
	  return function compareTRS (tr1, tr2) {
		var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
		var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
		if (value1 < value2) {
			return -1;
		} else if (value1 > value2) {
			return 1;
		} else {
			return 0;
		}
	  }
	},
	convert : function (value, datatype) {
	  switch(datatype) {
	  	case "int":
	  		return parseInt(value);
	  	case "float":
	  		return parseFloat(value);
	  	case "date":
	  		return new Date(Date.parse(value));		
	  	default:
	  	 	return value.toString();	
	  }
	}
}



注意这个方法的使用，用到了javascript闭包的技术。 

generateCompareTRS : function (col, datatype) {
	  return function compareTRS (tr1, tr2) {
		var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
		var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
		if (value1 < value2) {
			return -1;
		} else if (value1 > value2) {
			return 1;
		} else {
			return 0;
		}
	  }
	}
svsechen198789
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现Table排序的方法
10-24
主要介绍了javascript实现Table排序的方法,涉及javascript针对表格对象的获取与排序相关技巧,需要的朋友可以参考下
【前端实例】JavaScript对Table数据进行排序操作
LaoYe的博客
03-11 7009
【提出需求】 点击表格头部的时候根据对应列的所有值来进行排序，最终显示排序后的数据行。 【具体效果】 【步骤思路】 点击需要排序列的数据头，获取数据头所在列的索引。通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 1、如何知道那一列需要排...
JavaScript实现table排序
能不能开拖拉机
03-28 601
前段时间一道笔试题，假设有一个记录成绩单的table,是让我们说说如何实现点击一个位置，然后对table按照其中成绩按顺序排列，再点击一次就可以按倒序排列。当时刚接触DOM不懂，现在刚刚接触了一点，就自己试着实现一下，心里也是知道必然会有很多问题，而且方法可能会很蠢。 我的方法 先获取table对象，再使用rows数组获取table[0]的每一行信息 建立数组score,获取每一行的td的内容，本例
JavaScript 实现table排序
Waiting for ...
07-21 3609
 一个Javascript 的类库，用于table内容排序。使用很方便，不用每次都去调用数据库了。特别适合多表查询的排序。加上的style.display 切换，也可以实现分页。效果演示用法:1.添加JSQUOTE:2.添加TABLE,注意的是：一定要有ID,class为"sortable"QUOTE:OK,可以了，简单的吧如果觉得太单调，自己加点CSS吧，官方
Javascript对table表格进行排序
lfy9608110935的专栏
06-18 768
   New Document    function sortTable(num,dataType){  var oTable = document.getElementById("tblSort");  var oTBody = oTable.tBodies[0];  var colDataRows = oTBody.rows;  var oTRs = new Array();  for(v
javascript table排序 这个更简单了，不用改变现在的表格结构
10-29
另外一个table排序，这个更简单了，不用改变现在的表格结构,来自国外的代码。
javascript操作表格排序实例分析
12-12
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下： 完整例子如下： <html> <head> <title>Table Sort Example</title> [removed] //转换器，将列的字段...
JavaScript实现表格点击排序的方法
12-07
本文实例讲述了JavaScript实现表格点击排序的方法。...表格排序</title> </head> <STYLE type=text/css>TABLE { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px so
javaScript对表格排序
09-26
使用javascript在客户端对表格进行排序的例子
JavaScript Table排序
weixin_33757609的博客
10-06 146
序二（09/05/03） 近来还是那么忙，趁五一更新一下程序吧。这个版本主要增加和改进了以下东西：1，对字符串改用localeCompare来比较；2，一次排序中能使用多个排序对象（用于值相等时再排序）；3，修正一些发现的问题；4，改进程序结构，个人觉得是更灵活更方便了；5，增加bool类型比较；6，添加attribute/property的内容；7，修正ie6/7的radio/checkbo...
table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便
席海斌的博客
08-27 5241
   首先编写js文件，源码如下。我在这里命名为：script.js   （如修改，在页面引用文件也要与之相同） var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.table=function(){ ...
javascript table 排序（升序，降序）： 兼容IE,FIREFOX
我的地盘
08-18 3444
//数组用于存放 SortRowList 对象（记录点击列的排序情况） var rowArray = new Array(); //当前table var sort_table =null; //当前table 的tbody部分 var tbody = null; // tabl
Table sort,html table 列排序
im_sk的窝
01-31 3764
/* By Sk 2013.01.30*/ var tableSort = function () { this.initialize.apply(this, arguments); } tableSort.prototype = { initialize: function (tableId, clickRow, startRow, endRow, classUp, clas
JS实现Table简单排序
codeck的博客
05-23 3673
刚学JS不久，通过写一个排序提升一下自己的JS水平，下面我把这个排序做成了一个插件，用的时候只需要在设置Class="ObjSort"即可看到效果。细节可能还有很多注意不够，效率如果还可以提高还请赐教。 $(function () { var v1 = $(".ObjSort"); var v2 = $(".ObjSort").a
sortTable---一个指令是你的表格可以排序
咕咕鸡的博客
11-16 5404
Angularjs directive，一个指令让你的表格排序
JS实现table列排序
每天积累一点点
09-12 832
[code="html"] JS实现table列排序 //调用比较函数 function sortTable(id,rowNum){ var oTable = document.getElementById(id);//获取以id为id的table对象 var oTbody = oTable.tBodies[0];//获取第一个tBody var oRows =...
对Table进行排序 (可指定排序方式)
横行青海夜带刀
12-09 1949
在日常的WEB开发中，对表格的排序经常会用到，于是在网上找了些资料，然后自己下来研究了下，做了一些整理，现在将他贴出来，一来备忘，二来可以帮助其他需要的人。   需要注意的地方： 关于table中按行按列排序的方法： 1. 取出每一行作为排序的单元，结果即为完整的正确的排序。 2. 每一行中有一个关键字用于排序的标准 2.1 每一个关键字都有类型的区别，如string, int, date,...
JS表格排序
xianzehua的专栏
07-10 598
自定义表格排序(JS) (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows;
vue table 表格拖拽排序
最新发布
05-26
使用 Vue.js 实现表格拖拽排序的方法如下： 1. 安装依赖 ``` npm install vue-draggable --save ``` 2. 引入依赖 在需要使用的组件中引入 `vue-draggable`： ```javascript import draggable from 'vuedraggable' ``` 3. 使用 `vue-draggable` 实现表格拖拽排序 HTML 代码： ```html <draggable v-model="tableData"> <table> <thead> <tr> <th>名称</th> <th>数量</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}</td> </tr> </tbody> </table> </draggable> ``` JavaScript 代码： ```javascript import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { tableData: [ { name: '商品1', amount: 10 }, { name: '商品2', amount: 20 }, { name: '商品3', amount: 30 } ] } } } ``` 这样，就可以通过拖拽表格行来实现表格排序了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值