JavaScript表格排序

最新推荐文章于 2022-04-15 09:54:59 发布

Lvdon9

最新推荐文章于 2022-04-15 09:54:59 发布

阅读量143

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85251547

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<style>
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
			}
		</style>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<script>
			window.onload = function() {
				var oBtn = document.getElementById('btn1');
				var oTab = document.getElementById('tab1');
				var bAsc = true; //是否升序排序
				oBtn.onclick = function() {
					var arr = [];
					//1.转成数组
					for(var i = 0; i < oTab.tBodies[0].rows.length; i++) {
						arr[i] = oTab.tBodies[0].rows[i];
					};
					//2.数组排序
					arr.sort(function(tr1, tr2) {
						if(bAsc) {
							
							return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
						} else {
							return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
						}
					});
					//3.重新插入
					for(var j = 0; j < arr.length; j++) {
						oTab.tBodies[0].appendChild(arr[j]);
					}
					//真为假,假为真
					bAsc=!bAsc;
				}

			}
		</script>
	</head>

	<body>
		<input id="btn1" type="button" value="排序" />
		<table id="tab1" border="1" width="400">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>3</td>
					<td>blue</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Leo</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>默默</td>
					<td></td>
				</tr>
				<tr>
					<td>6</td>
					<td>aaa</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>bbb</td>
					<td></td>
				</tr>
				<tr>
					<td>1</td>
					<td>ccc</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>

</html>