sort html table by js

最新推荐文章于 2024-04-11 16:33:39 发布

原创最新推荐文章于 2024-04-11 16:33:39 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #ViewUI

本文介绍了如何使用JavaScript实现HTML表格的排序功能，包括非IE浏览器和IE浏览器的兼容性处理，通过创建测试HTML环境和JavaScript代码实现排序，并提供了GUI交互界面。

it's efficient to sort a table in HTML with Javascript.
to solve it. the focus is keep the event itself.
I do it for non-IE and IE with respective js code

first, let's build up the test html environment


<html>
	<head>
		<title>demo table sort</title>
		<script src="js/SortUtil.js" type="text/javascript"></script>
		<style>
			#t {
				border-collapse: collapse;
			}
			#t td {
				text-align: center;
				border: 1px solid #ccc;
			}
			#t tr:nth-child(odd){
				background-color: #eee;
			}
			#t tr:first-child {
				font-weight: bold;
				background-color: #ddd;
			}
			.divText span {
				width: 150px;
				display: inline-block;
			}
		</style>
		<script>
			var $=function(id){
				return document.getElementById(id);
			}
			window.onload=function(){
			}
			var asc=1;
			function sort(){
				var startRow=$("startRow").value;
				var sortIndex=$("sortIndex").value;
				var sortKey=$("sortKey").value;
				var asc=($("rad1").checked)?1:0;
				asc=(1==asc)?0:1;
				var reg=/explorer/i;
				var isIE=reg.test(navigator.appName);
//				SortUtil.sortTable($("t"), startRow, sortIndex);
				SortUtil.sortTable($("t"), startRow, sortIndex, sortKey, asc, isIE);
			}
		</script>
	</head>
	<body>
		<table id="t">
			<tr>
				<td>title1</td><td>title2</td><td>title3</td><td>title4</td>
			</tr>
			<tr>
				<td sortvalue="9">1</td><td>a</td><td>a</td><td>12</td>
			</tr>
			<tr>
				<td sortvalue="8">2</td><td>b</td><td>b</td><td>22</td>
			</tr>
			<tr>
				<td sortvalue="7">3</td><td>c</td><td>c</td><td>23</td>
			</tr>
			<tr>
				<td sortvalue="6">4</td><td>d</td><td>a</td><td>4</td>
			</tr>
			<tr>
				<td sortvalue="5">05</td><td>e</td><td>b</td><td>8</td>
			</tr>
			<tr>
				<td sortvalue="4">6</td><td>f</td><td>c</td><td>6</td>
			</tr>
			<tr>
				<td sortvalue="3">17</td><td>g</td><td>a</td><td>16</td>
			</tr>
			<tr>
				<td sortvalue="2">08</td><td>h</td><td>b</td><td>12</td>
			</tr>
			<tr>
				<td sortvalue="1">12</td><td>i</td><td>c</td><td>20</td>
			</tr>
		</table>
		<hr />
		<div class="divText">
			<span>sort row start at:</span><input type="text" id="startRow" value="1" /><br />
			<span>sortcolumn:</span><input type="text" id="sortIndex" value="0" /><br />
			<span>sortproperty:</span><input type="text" id="sortKey" value="0" /><br />
			<span>order by:</span><input id="rad1" name="sortOrder" type="radio" value="1" checked="checked" /><label for="rad1">DESC</label><input type="radio" id="rad2" name="sortOrder" style="margin-left: 20px" value="0" /><label for="rad2">ASC</label><br />
			<input type="button" style="width:80;" value="sort" onclick="sort()" />
		</div>
	</body>
</html>

the GUI as below

[img]http://dl.iteye.com/upload/attachment/551807/1c054215-337c-3bc1-8902-6e161a9c3d25.png[/img]

second, coding js


(function(){
	var array;
	var table;
	var startRow=1;
	var sortIndex=0;
	var sortKey;
	var asc=1;
	var isIE=false;

	var SortUtil=function(){
		return SortUtil;
	}
	this.SortUtil=SortUtil;
	SortUtil.sortTable=function(_table, _startRow, _sortIndex, _sortKey, _asc, _isIE){
		table=_table;
		startRow=_startRow;
		sortIndex=(undefined==_sortIndex || null==_sortIndex)?0:_sortIndex;
		sortKey=(undefined==_sortKey || null==_sortKey)?"":_sortKey;
		asc=(undefined==_asc || null==_asc)?1:_asc;
		isIE=(undefined==_isIE || null==_isIE)?false:_isIE;

		(isIE)?readData_IE():readData();
		sortData();
		writeData();
	}
	function readData(){
		array=new Array();
		try{
			var len=table.rows.length;
			for(var i=0;i<len-startRow;i++){
				array.push(table.rows[len-i-1]);
				table.deleteRow(-1);
			}
		}catch(err){
			alert("read data: "+err);
		}
	}
	function readData_IE(){
		array=new Array();
		try{
			var len=table.rows.length;
			for(var i=0;i<len-startRow;i++){
				array.push(table.rows[len-i-1].cloneNode(true));
				table.deleteRow(-1);
			}
		}catch(err){
			alert("read data: "+err);
		}
	}
	function sortData(){
		try{
			var sortMethod=(isIE)?sortArithmetic_IE:sortArithmetic;
			array.sort(sortMethod);
		}catch(err){
			alert("sort data: "+err);
		}
	}
	function writeData(){
		try{
			var len=array.length;
			for(var i=0;i<len;i++){
				table.tBodies[0].appendChild(array[i]);
//					table.appendChild(array[i]);
			}
		}catch(err){
			alert("write data: "+err);
		}
	}
	function sortArithmetic(a, b){
		var x, y, flag;
		x=a.cells[sortIndex].getAttribute(sortKey);
		y=b.cells[sortIndex].getAttribute(sortKey);
		if(null==x)
			x=a.cells[sortIndex].innerHTML;
		if(null==y)
			y=b.cells[sortIndex].innerHTML;
		if(isNaN(x) || isNaN(y)){
			flag=(1==asc)?compareText(x, y):compareText(y, x);
		}else{
			flag=(1==asc)?x-y:y-x;
		}
		if(NaN==flag)
			flag=0;
		return flag;
	}
	function sortArithmetic_IE(a, b){
		var x, y, flag;
		x=a.childNodes[sortIndex].getAttribute(sortKey);
		y=b.childNodes[sortIndex].getAttribute(sortKey);
		if(null==x)
			x=a.childNodes[sortIndex].innerHTML;
		if(null==y)
			y=b.childNodes[sortIndex].innerHTML;
		if(isNaN(x) || isNaN(y)){
			flag=(1==asc)?compareText(x, y):compareText(y, x);
		}else{
			flag=(1==asc)?x-y:y-x;
		}
		if(NaN==flag)
			flag=0;
		return flag;
	}
	function compareText(a, b){
		var arrayA=new Array();
		var arrayB=new Array();
		for(var i=0;i<a.length;i++){
			arrayA.push(a.charCodeAt(i));
		}
		for(var i=0;i<b.length;i++){
			arrayB.push(b.charCodeAt(i));
		}
		var len=(arrayA.length>=arrayB.length)?arrayA.length:arrayB.length;
		for(var i=0;i<len;i++){
			var x=arrayA[i];
			var y=arrayB[i];
			var flag=x-y;
			if(flag!=0)
				return flag;
		}
	}
})();

save to "images/SortUtil.js" to linked by html
now, it's done.

---------------------------
note:
1.in sort arithmetic method, as per tr have been removed from table, so it's not support to access cell node by method: tr.cells[?] in IE, but it's support by FF, Chrome. so we use childNode to instead for access cell node.
2.in IE, it's forbidden to (tr) appendChild to table directly. it muse appendChild to tBodies[0]. the issue is not exist in FF, Chrome also.