首先写一个表格,
<!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)
//获取排序后的行的信息
}
})
}