实现表格上移下移 js
实现表格行上移下移的 JavaScript 方法
通过 JavaScript 操作 DOM 可以实现表格行的上移和下移功能。以下是两种常见的方法：
方法一：使用 insertBefore 和 insertAdjacentElement
function moveRowUp(row) {
const table = row.parentNode;
const prevRow = row.previousElementSibling;
if (prevRow) {
table.insertBefore(row, prevRow);
}
}
function moveRowDown(row) {
const table = row.parentNode;
const nextRow = row.nextElementSibling;
if (nextRow) {
table.insertBefore(nextRow, row);
}
}方法二：使用 swapNode (非标准方法，仅适用于某些浏览器)
function moveRowUp(row) {
const prevRow = row.previousElementSibling;
if (prevRow) {
row.swapNode(prevRow); // 注意：这不是标准方法
}
}
function moveRowDown(row) {
const nextRow = row.nextElementSibling;
if (nextRow) {
row.swapNode(nextRow); // 注意：这不是标准方法
}
}完整示例代码
<table id="myTable">
<tr><td>Row 1</td><td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td></tr>
<tr><td>Row 2</td><td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td></tr>
<tr><td>Row 3</td><td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td></tr>
</table>
<script>
function moveUp(button) {
const row = button.parentNode.parentNode;
const table = row.parentNode;
const prevRow = row.previousElementSibling;
if (prevRow) {
table.insertBefore(row, prevRow);
}
}
function moveDown(button) {
const row = button.parentNode.parentNode;
const table = row.parentNode;
const nextRow = row.nextElementSibling;
if (nextRow) {
table.insertBefore(nextRow, row);
}
}
</script>使用 jQuery 实现
如果项目中使用了 jQuery，可以简化代码：
function moveRowUp(row) {
$(row).prev().before(row);
}
function moveRowDown(row) {
$(row).next().after(row);
}注意事项
- 确保在移动行之前检查是否存在上一个或下一个兄弟节点
- 考虑添加动画效果提升用户体验
- 对于大型表格，可能需要优化性能
- 移动后可能需要更新相关数据绑定
这些方法可以灵活地应用到各种表格操作场景中，根据具体需求进行调整即可。
