演示
HTML部分
<!DOCTYPE html>
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 这里是虚拟数据行，你可以根据需要添加更多 -->
<tr>
<td>2023-10-13 10:00 ---- PM</td>
<td>
<button onclick="moveUp(this)">上移</button>
<button onclick="moveDown(this)">下移</button>
<button onclick="moveToTop(this)">置顶</button>
<button onclick="moveToBottom(this)">置底</button>
<button onclick="removeRow(this)">删除</button>
</td>
</tr>
<tr>
<td>2023-10-13 02:30 ---- AM</td>
<td>
<button onclick="moveUp(this)">上移</button>
<button onclick="moveDown(this)">下移</button>
<button onclick="moveToTop(this)">置顶</button>
<button onclick="moveToBottom(this)">置底</button>
<button onclick="removeRow(this)">删除</button>
</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">添加数据行</button>
<script>
var dataList = [
{ time: "2023-10-13 10:00 PM", operation: "示例操作1" },
{ time: "2023-10-13 02:30 AM", operation: "示例操作2" },
// 添加更多数据行
];
// 初始化表格
function initializeTable() {
var tableBody = document.getElementById("tableBody");
tableBody.innerHTML = ""; // 清空表格内容
dataList.forEach(function (data) {
var newRow = document.createElement("tr");
newRow.innerHTML = `
<td>${data.time}</td>
<td>
<button onclick="moveUp(this)">上移</button>
<button onclick="moveDown(this)">下移</button>
<button onclick="moveToTop(this)">置顶</button>
<button onclick="moveToBottom(this)">置底</button>
<button onclick="removeRow(this)">删除</button>
</td>
`;
tableBody.appendChild(newRow);
});
// console.log("🚀 ~ file: tabel.html:47 ~ dataList:", dataList)
}
// 添加行
function addRow() {
var newTime = getCurrentTime() + ' ---- ' + Math.round(Math.random() * 100 + 1);
dataList.push({ time: newTime, operation: "新操作" });
initializeTable(); // Re-render the table
}
//移除行
function removeRow(button) {
// var row = button.closest("tr"); // 获取包含按钮的行//查找DOM树中最接近指定选择器的祖先元素
var row = button.parentNode.parentNode; // 两次 parentNode 分别获取按钮的 <td> 元素和 <tr> 元素
var rowIndex = row.rowIndex - 1; // 减1以考虑表头行
console.log("🚀 ~ file: tabel.html:83 ~ removeRow ~ row:", row)
if (rowIndex >0) {
dataList.splice(rowIndex, 1); // 从数据列表中移除相应的数据
console.log("🚀 ~ file: tabel.html:85 ~ removeRow ~ dataList:", dataList)
initializeTable(); // 重新渲染表格
}else{
alert('行行好，再删除就没了')
}
}
function getCurrentTime() {
var now = new Date();
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var day = now.getDate().toString().padStart(2, '0');
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var time = `${year}-${month}-${day} ${hours}:${minutes}`;
return time;
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
上移
//上移
function moveUp(button) {
var row = button.closest("tr"); // 找到包含按钮的行
var rowIndex = row.rowIndex - 1; // 表格行索引（减1以考虑表头行）
if (rowIndex > 0) { // 确保不是第一行
// 交换当前行和上一行的数据
var temp = dataList[rowIndex];
dataList[rowIndex] = dataList[rowIndex - 1];
dataList[rowIndex - 1] = temp;
initializeTable(); // 重新渲染表格
}else{
alert('别再点了，已经是第一行了')
}
}
下移
// 下移
function moveDown(button) {
var row = button.closest("tr"); // 找到包含按钮的行
var rowIndex = row.rowIndex - 1; // 表格行索引（减1以考虑表头行）
if (rowIndex < dataList.length - 1) { // 确保不是最后一行
// 交换当前行和下一行的数据
var temp = dataList[rowIndex];
dataList[rowIndex] = dataList[rowIndex + 1];
dataList[rowIndex + 1] = temp;
initializeTable(); // 重新渲染表格
}else{
alert('别再点了，已经是最后一行了')
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
置顶
//置顶
function moveToTop(button) {
var row = button.closest("tr"); // 找到包含按钮的行
var rowIndex = row.rowIndex - 1; // 表格行索引（减1以考虑表头行）
if (rowIndex > 0) { // 确保不是第一行
// 将当前行数据移到数组的开头
var movedRowData = dataList.splice(rowIndex, 1)[0];
console.log("🚀 ~ file: tabel.html:135 ~ moveToTop ~ movedRowData:", movedRowData)
dataList.unshift(movedRowData);
initializeTable(); // 重新渲染表格
}else{
alert('行行好，已经是第一个了')
}
}
置底
//置底
function moveToBottom(button) {
var row = button.closest("tr"); // 找到包含按钮的行
var rowIndex = row.rowIndex - 1; // 表格行索引（减1以考虑表头行）
if (rowIndex < dataList.length - 1) { // 确保不是最后一行
// 将当前行数据移到数组的末尾
var movedRowData = dataList.splice(rowIndex, 1)[0];
dataList.push(movedRowData);
initializeTable(); // 重新渲染表格
}
}