在html中实现点击表格表头进行排序，并获取排序后的行对象。

最新推荐文章于 2025-09-10 10:18:24 发布

原创最新推荐文章于 2025-09-10 10:18:24 发布 · 660 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文介绍了如何使用HTML和JavaScript创建一个可动态渲染和排序的表格，展示了状态标识（在线/不在线），并提供了获取排序后行信息的函数。

首先写一个表格，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="table-content">
			<div class="table-class">
				<div id="myTable">
				</div>
			</div>
		</div>
	</body>
	<script>
		var html1=''
		initTable()
		function initTable() {
		tableList = [{
			id: 001,
			name: "1号机",
			state: "2"
		}, {
			id: 002,
			name: "2号机",
			state: "1"
		}, {
			id: 003,
			name: "3号机",
			state: "2"
		}]
		
		html1 += `  <div class="tableClass">
		    <table style="font-size:0.9rem;" id="mytable">
				<thead>
					<tr>
						<th style="width:5rem;text-align: center;">编号</th>
						<th style="width:5rem;text-align: center;">名称</th>
						<th style="width:3rem;text-align: center;">状态</th>
					</tr>
				</thead>
				<tbody>
					${tableList.map((item, index) => {
					if (item.state == "1") {
						return	`<tr>
						    <td style="width:5rem;">${item.id}</td>
							<td style="width:5rem;">${item.name}</td>
							<td style="color:rgb(57,212,75);width:3rem;">在线</td>
							</tr>`
					} else {
						return	`<tr>
						    <td style="width:5rem;">${item.id}</td>
							<td style="width:5rem;">${item.name}</td>
							<td style="color:rgb(255, 0, 0);width:3rem;">不在线</td>
							</tr>`}
					}).join('')
				} </tbody> </table > </div> `
				document.getElementById("myTable").innerHTML = html1;	
	}
	</script>
</html>

然后使用菜鸟教程里面的排序方法

//https://www.runoob.com/w3cnote/js-sort-table.html
		function sortTable(n) {
			var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
			table = document.getElementById("mytable");
			switching = true;
			//设置排序方向为升序：
			dir = "asc";
			/*创建一个循环，直到没有切换完成：*/
			while (switching) {
				//开始说：没有切换完成：
				switching = false;
				rows = table.rows;
				/*遍历所有表格行（除了第一行，它包含表格标题）：*/
				for (i = 1; i < (rows.length - 1); i++) {
					// 首先说不应该有切换：
					shouldSwitch = false;
					/*获取要比较的两个元素，一个来自当前行，一个来自下一行：*/
					x = rows[i].getElementsByTagName("TD")[n];
					y = rows[i + 1].getElementsByTagName("TD")[n];
					/*检查两行是否应该交换位置，基于方向，asc 或 desc:*/
					if (dir == "asc") {
						if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
							// 如果是这样，标记为一个开关并打破循环：
							shouldSwitch = true;
							break;
						}
					} else if (dir == "desc") {
						if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
							// 如果是这样，标记为一个开关并打破循环：
							shouldSwitch = true;
							break;
						}
					}
				}
				if (shouldSwitch) {
					/*如果已经标记了一个开关，则进行开关并标记一个开关已经完成：*/
					rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
					switching = true;
					//每次完成切换，将此计数增加 1：
					switchcount++;
				} else {
					/*如果没有进行切换并且方向为“asc”，则将方向设置为“desc”并再次运行 while 循环。*/
					if (switchcount == 0 && dir == "asc") {
						dir = "desc";
						switching = true;
					}
				}
			}
			console.log("table", table)
		}

最后是点击获取排序后的行信息

function getRowData(button) {
			var table1 = document.getElementById("myTable"); // 获取表格对象
			var rows = table1.getElementsByTagName("tr"); // 获取表格行对象
			let row = button.parentNode.parentNode;
			var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
			var edd = td.parentElement
			var cells = edd.getElementsByTagName("td")
			const table = tableList
			table.map((item, index) => {
				if (item.id == cells[0].innerText) {
					console.log(item)
					//获取排序后的行的信息
				}
			})
		}

标签

#前端