【javascript】根据表格中的某一列进行排序

最新推荐文章于 2024-01-31 18:01:15 发布

Jeep_Dom

最新推荐文章于 2024-01-31 18:01:15 发布

阅读量1.1k

点赞数

分类专栏： Javascript 文章标签： javascript 排序

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17021457

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	var b = true ;
	function sortAge(){
		var tabNode = document.getElementsByTagName("table")[0];
		var trNodes = tabNode.rows;  //获取表格中的行对象
		var arr = new Array();
		for(var x=1;x<trNodes.length;x++){  //临时容器存入的是表格中行对象的引用
			arr[x-1] = trNodes[x];
		}
		sort(arr);
		var tbdNode = tabNode.childNodes[0];	
		if(b){                                  //if....else...控制按年龄的升降进行排序
			for(var x=0;x<arr.length;x++){
				tbdNode.appendChild(arr[x]);
			}
			b = false; 
		}else{
			for(var x=arr.length-1;x>=0;x--){
				tbdNode.appendChild(arr[x]);
			}
			b = true ;
		}	
	}
	function sort(arr){ // 排序
		for(var x=0;x<arr.length;x++){
			for(var y=x+1;y<arr.length;y++){
				if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){ // 不进行parseInt转换是以字符串的ASCII比较
					var temp = arr[x];
					arr[x] = arr[y];
					arr[y] = temp;
				}
			}
		}
	}
</script>

<style type="text/css">
	table{ width:60%; border:solid 1px #0066FF;}
	table td {border:solid 1px #0099ff;}
	a{ text-decoration: none;}
</style>

</head>
<body>
	<table>
		<tr>
			<td>姓名</td><td><a href="javascript:void(0)" οnclick="sortAge()">年龄</a></td><td>地址</td>
		</tr>
		<tr>
			<td>张三</td><td>23</td><td>北京</td>
		</tr>
		<tr>
			<td>李四</td><td>25</td><td>上海</td>
		</tr>
		<tr>
			<td>王五</td><td>15</td><td>广州</td>
		</tr>
		<tr>
			<td>唐总</td><td>20</td><td>长沙</td>
		</tr>
	</table>
</body>

Jeep_Dom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【javascript】根据表格中的某一列进行排序

var b = true ; function sortAge(){ var tabNode = document.getElementsByTagName("table")[0]; var trNodes = tabNode.rows; //获取表格中的行对象 var arr = new Array(); for(var x=1;x<trNodes.length;x++){
复制链接

扫一扫