javascript实现简单的table排序功能-优快云博客

闲着无聊，写了个简单的表格排序的demo，demo很简单，供诸位参考之用

js代码：

(
	function (){
		var editTable = null;
		var obj =new Object();
		var isSort = false;
		/**
		 *构造函数 
		 */
		Table = function(id){
			if(typeof id == 'string'){
				editTable = document.getElementById(id)
				if(editTable){
					var rows = editTable.rows;//获取表单所有的行
					if(rows.length > 0){
						for(var i = 0 ; i < rows[0].cells.length ; i ++){
							var td = editTable.rows[0].cells[i];
							obj[td.innerHTML] = i;
							addEvent(td,"click",sort);//为表单第一行每个单元格添加单击事件
						}
					}
				}
			}
		}
		/**
		 *添加事件 
		 */
		var addEvent = function(node,e,callback){
			if(node.addEventListener){
				node.addEventListener(e,callback,false);
			}else if(node.attachEvent){
				node.attachEvent("on" + e ,callback);
			}else{
				node["on" + e] = callback;
			}
		}	
		/**
		 *排序 
 		 * @param {Object} event
		 */
		var sort = function(event){
			var target = getTarget(event);
			var index = obj[target.innerHTML];
			var rowsArray = new Array();
			var rows = editTable.rows;
			var sortObj = new Object();
			if(rows.length > 0){
				for(var i = 1 ; i < rows.length ; i++){
					rowsArray.push(rows[i]);
				}
			} 
			if(rowsArray.length > 0){
				if(isSort){
					rowsArray.reverse();
				}else{
					/**
					 *此排序函数仅当单元格都是数字时测试通过。
					 * 请根据自己的需求编写相应的排序函数 
					 */
					rowsArray.sort(function(tr1,tr2){
						var cell1 = tr1.cells[index].innerHTML;
						var cell2 = tr2.cells[index].innerHTML;
						if(cell1 > cell2){
							return -1;
						}else if(cell1 == cell2){
							return 0
						}else{
							return 1;
						}
					});
					isSort = true;					
				}
				var oFragment = document.createDocumentFragment()
				for(var i = 0 ; i < rowsArray.length ; i++){
					oFragment.appendChild(rowsArray[i]);
				}
				editTable.tBodies[0].appendChild(oFragment);
			}
		}
		/**
		 *获取事件发生对象 
 		 * @param {Object} event
		 */
		var getTarget = function(event){
			event = event || window.event;
			return event.target || event.srcElement;
		}	
	}
)();

HTML页面：

<HTML>
	<HEAD>
		<TITLE>edit table</TITLE>
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<script src="table.js"></script>
	</HEAD>
	<BODY>
		<table width="100%" border="1" id="table">
			<tr>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
				<td>第四列</td>
				<td>第五列</td>
				<td>第六列</td>
				<td>第七列</td>
				<td>第八列</td>
				<td>第九列</td>				
			</tr>
			<tr>
				<td>1</td>
				<td>5</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>								
			</tr>
			<tr>
				<td>2</td>
				<td>4</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>	
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>	
			</tr>	
			<tr>
				<td>4</td>
				<td>2</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>	
			</tr>
			<tr>
				<td>5</td>
				<td>1</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>	
			</tr>									
		</table>
	</BODY>
	<script type="text/javascript">
		var table = new Table("table");
	</script>
</HTML>