JS实现table列排序

<HTML>
<HEAD>
<TITLE>JS实现table列排序</TITLE>
<script>
	//调用比较函数
	function sortTable(id,rowNum){
		var oTable = document.getElementById(id);//获取以id为id的table对象
		var oTbody = oTable.tBodies[0];//获取第一个tBody
		var oRows = oTbody.rows;//获取tBody的所有的行
		var aTRs = new Array;//新建一个数组
		for (var i=0;i < oRows.length ;i++ ){
			aTRs[i] = oRows[i];//循环将所有行换到新的数组
		}
		aTRs.sort( function(oTR1,oTR2){
			var s1 = oTR1.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
			var s2 = oTR2.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
			return  parseInt(s1)-parseInt(s2);//进行比较
		});//对数组进行比较,是通过新的数组的行比较
		var otemp = document.createDocumentFragment();//创建文档碎片
		for (var i = 0;i<aTRs.length ;i++ ){
			otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中
		}
		oTbody.appendChild(otemp);//将文档碎片添加到文档中
	}
</script>
</HEAD>
<BODY>
<table id="t" >
	<thead>
		<tr>
			<button onclick = "sortTable('t',0);">按照第一列排序</button>
			<button onclick = "sortTable('t',1);">按照第二列排序</button>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>1</td></tr>
		<tr><td>10</td><td>6</td></tr>
		<tr><td>3</td><td>5</td></tr>
		<tr><td>5</td><td>4</td></tr>
		<tr><td>2</td><td>3</td></tr>
		<tr><td>9</td><td>9</td></tr>
	</tbody>
</BODY>
</HTML>

你可能感兴趣的:(JavaScript)