JS实现table列排序

最新推荐文章于 2023-12-02 19:56:31 发布

每天积累一点点

最新推荐文章于 2023-12-02 19:56:31 发布

阅读量850

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/xia562653223/article/details/84288597

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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>

每天积累一点点

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现table列排序

[code="html"]JS实现table列排序 //调用比较函数 function sortTable(id,rowNum){ var oTable = document.getElementById(id);//获取以id为id的table对象 var oTbody = oTable.tBodies[0];//获取第一个tBody var oRows =...
复制链接

扫一扫

专栏目录