js对表格进行排序

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

原创最新推荐文章于 2023-12-02 19:56:31 发布 · 5.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js表格排序

js代码专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格搜索</title>
	</head>
	<script type="text/javascript">
		window.onload = function () {
			var oTab = document.getElementById('tab2');
			var oBtn = document.getElementById('btn1');
			
			oBtn.onclick = function () {
				var arr = [];
				
				for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
					arr[i]=oTab.tBodies[0].rows[i];
				}
				arr.sort(function (tr1, tr2) {
					var n1 = parseInt(tr1.cells[0].innerHTML);
					var n2 = parseInt(tr2.cells[0].innerHTML);
					
					return n1-n2;
				});
				for (var i = 0; i < arr.length; i++) {
					oTab.tBodies[0].appendChild(arr[i]);
				}
			};
		}
	</script>
	<body>
		<input id="btn1" type="button" value="排序" />
		<table id="tab2" width="500" border="1">
			<thead>
				<td>序号</td>
				<td>姓名</td>
				<td>学号</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>丁冯超</td>
					<td>131412</td>
					<td>21</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>钟辉</td>
					<td>131212</td>
					<td>20</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>申振</td>
					<td>131415</td>
					<td>23</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>丁元超</td>
					<td>131315</td>
					<td>21</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>于加良</td>
					<td>111415</td>
					<td>20</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

程序源代码，li中的元素跟数组中的元素灵活应用
排序前
排序后
其中运用的原理代码用如下的js代码进行解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索的原理</title>
		<style type="text/css">
			#ul1{background: green;}
			#ul2{background: yellow;}
		</style>
		<script type="text/javascript">
			window.onload = function () {
				var Oul1 = document.getElementById('ul1');
				var Oul2 = document.getElementById('ul2');
				var Obtn = document.getElementById('btn1');
				
				Obtn.onclick = function () {
					var oli = Oul1.children[0];
					
					//Oul1.removeChild(oli);所以这一句可以删除
					//Oul2.appendChild(oli);//先把原来数组中的元素删除然后将它赋值给新的父级 
					Oul1.appendChild(oli);
				}
			}
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<input id="btn1" type="button" value="移动" />
		<ul id="ul2">
			
		</ul>
	</body>
</html>

原理示意图