来一个Table排序吧

Published: 03 Jul 2013

遇到一个需要对表格排序的需求,点击标题,按照升序或者降序来重新显示table。

然后就尝试着做了一个,如下:

Name Age
Brown 35
Dave 22
Alex 23
Allen 27

js:

/**
* 传入Table,为其绑定点击排序事件
**/
function enhanceTable(table) {
	var theadArr = [];
	var sortFlat = false;
	var theadNode = table.tHead.rows[0].cells;
	
	//先储存到一个array中, 方便后面去排序
	try {
		theadArr = theadNode.slice();
	}
	catch (ex) {//ie
		theadArr = [];
		for (var i=0; i<theadNode.length; i++) {
			theadArr.push(theadNode[i]);
		} 
	}
	
	//table thead 的点击回调函数
	function onClickTHead(event) {
		sortTable(table, theadArr.indexOf(event.target), sortFlat);
		sortFlat = !sortFlat;
	}
	//排序Table函数
	function sortTable(table, indexOfColumn, isAsc) {
		var arrTableRows = [];
		for(var i=0; i<table.tBodies[0].rows.length; i++) {
			arrTableRows.push( table.tBodies[0].rows[i] );
		}
		//简单起见,排序规则就是字符串比较,一般情况够用了
		arrTableRows.sort( function (a, b) {
			return isAsc==true? 
			 (a.cells[indexOfColumn].innerHTML > b.cells[indexOfColumn].innerHTML) :
			 (a.cells[indexOfColumn].innerHTML < b.cells[indexOfColumn].innerHTML);
		});
		//最小化现场更新
		var markUp = "";
		for(var i=0; i<arrTableRows.length; i++) {
			markUp += "<tr>";
			markUp += arrTableRows[i].innerHTML
			markUp += "</tr>";
		}
		table.tBodies[0].innerHTML = markUp;
	
		return arrTableRows;
	}
	table.tHead.addEventListener("click", onClickTHead);
} <script> window.onload = function () {
console.log("window on load");
enhanceTable(document.getElementById("tableSortable")); } </script> <script src="/assets/JS/table_sort.js" type="text/javascript" charset="utf-8"></script>