当前位置：首页 > JavaScript

实现表格上移下移 js

2026-04-05 00:16:34JavaScript

表格行上移下移实现方法

核心思路
通过DOM操作交换相邻行的位置，结合事件监听实现交互效果。以下是两种常见实现方式：

方法一：纯JavaScript实现

// 获取表格对象
const table = document.getElementById('sortable-table');

// 上移函数
function moveUp(button) {
  const row = button.closest('tr');
  const prevRow = row.previousElementSibling;
  if (prevRow) {
    row.parentNode.insertBefore(row, prevRow);
  }
}

// 下移函数
function moveDown(button) {
  const row = button.closest('tr');
  const nextRow = row.nextElementSibling;
  if (nextRow) {
    row.parentNode.insertBefore(nextRow, row);
  }
}

HTML结构示例

实现表格上移下移 js

<table id="sortable-table">
  <tr>
    <td>内容1</td>
    <td>
      <button onclick="moveUp(this)">↑</button>
      <button onclick="moveDown(this)">↓</button>
    </td>
  </tr>
  <!-- 更多行... -->
</table>

方法二：jQuery简化版

$('.move-up').click(function(){
  const row = $(this).closest('tr');
  row.prev().before(row);
});

$('.move-down').click(function(){
  const row = $(this).closest('tr');
  row.next().after(row);
});

注意事项

实现表格上移下移 js

边界检测：首行不能上移，末行不能下移
性能优化：大数据量表格建议使用虚拟滚动
视觉反馈：可添加过渡动画增强用户体验

扩展功能实现

// 添加行高亮效果
function highlightRow(row) {
  row.style.backgroundColor = '#ffeeba';
  setTimeout(() => {
    row.style.backgroundColor = '';
  }, 500);
}

// 改进后的移动函数
function enhancedMove(button, direction) {
  const row = button.closest('tr');
  const target = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;

  if (target) {
    row.parentNode.insertBefore(
      direction === 'up' ? row : target,
      direction === 'up' ? target : row
    );
    highlightRow(row);
  }
}

实际应用建议