js实现成绩排序

最新推荐文章于 2022-07-27 10:18:29 发布

lucky111one

最新推荐文章于 2022-07-27 10:18:29 发布

阅读量6.8k

点赞数 3

分类专栏： JavaScript 文章标签： js排序成绩排序

本文链接：https://blog.csdn.net/luckyone1111/article/details/77898569

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在页面上有如下表格，当点击成绩时，所有行数根据成绩进行从低到高排序，再点击则从高到低排序，请用javascript实现以上功能。

姓名	性别	成绩
张三	男	77
李四	女	87
王五	未知	50

js代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>成绩排序</title>
</head>
<body>
	<table id="tableSort">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th id="mark">成绩</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>77</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>87</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>未知</td>
				<td>50</td>
			</tr>			
		</tbody>	
	</table>
	<script type="text/javascript">
		var tbody = document.getElementById('tableSort').tBodies[0];             //获取tbody
		var mark  =document.getElementById('tableSort').tHead.rows[0].cells[2];  // 获取成绩元素
		var flag  =1;
		mark.οnclick=function(){                                                 //点击成绩单元格，进行排序
			var arr=[];
			for (var i = 0,len=tbody.rows.length; i < len; i++) {                //将每一行的数据存放进数组arr中
                    arr.push(tbody.rows[i]);
            }
             arr.sort(function(a,b){                                            //进行成绩排序
                 var sort=flag*(a.cells[2].innerHTML - b.cells[2].innerHTML);  
                 return sort;       
            }); 
            flag=-flag; 
			for (var i = 0,len=tbody.rows.length; i < len; i++) {              //排序后，重新添加进表格
                    tbody.appendChild(arr[i]);
            }
		}
	</script>
</body>
</html>