实现表格上移下移 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);
}

注意事项

• 确保在移动行之前检查是否存在上一个或下一个兄弟节点
• 考虑添加动画效果提升用户体验
• 对于大型表格，可能需要优化性能
• 移动后可能需要更新相关数据绑定

这些方法可以灵活地应用到各种表格操作场景中，根据具体需求进行调整即可。