当前位置：首页 > JavaScript

实现表格上移下移 js

2026-03-01 23:27:36JavaScript

实现表格行上移下移功能

通过JavaScript实现表格行的上移和下移操作，可以结合DOM操作和事件监听完成。以下是具体实现方法：

基本HTML结构

<table id="sortableTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>
        <button class="move-up">上移</button>
        <button class="move-down">下移</button>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>
        <button class="move-up">上移</button>
        <button class="move-down">下移</button>
      </td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

JavaScript实现

document.addEventListener('DOMContentLoaded', function() {
  const table = document.getElementById('sortableTable');

  table.addEventListener('click', function(e) {
    const btn = e.target;
    const row = btn.closest('tr');

    if (btn.classList.contains('move-up')) {
      moveRowUp(row);
    } else if (btn.classList.contains('move-down')) {
      moveRowDown(row);
    }
  });

  function moveRowUp(row) {
    const prevRow = row.previousElementSibling;
    if (prevRow && prevRow.tagName === 'TR') {
      row.parentNode.insertBefore(row, prevRow);
    }
  }

  function moveRowDown(row) {
    const nextRow = row.nextElementSibling;
    if (nextRow && nextRow.tagName === 'TR') {
      row.parentNode.insertBefore(nextRow, row);
    }
  }
});

使用jQuery简化实现

如果项目中已引入jQuery，可以使用更简洁的写法：

$(document).ready(function() {
  $('#sortableTable').on('click', '.move-up', function() {
    const row = $(this).closest('tr');
    row.prev().before(row);
  });

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

注意事项

上移操作需要检查当前行是否已经是第一行
下移操作需要检查当前行是否已经是最后一行
如果表格有固定行（如表头），需要确保操作只针对数据行
移动后可能需要重新绑定事件或更新数据索引

扩展功能

可以为移动操作添加动画效果，提升用户体验：

function moveRowWithAnimation(row, direction) {
  const tbody = row.parentNode;
  const duration = 300;

  if (direction === 'up') {
    const prevRow = row.previousElementSibling;
    if (prevRow) {
      row.style.transition = `transform ${duration}ms`;
      row.style.transform = 'translateY(-100%)';

      setTimeout(() => {
        tbody.insertBefore(row, prevRow);
        row.style.transition = '';
        row.style.transform = '';
      }, duration);
    }
  }
  // 类似实现下移动画...
}

以上方法提供了纯JavaScript和jQuery两种实现方案，可根据项目需求选择合适的方式。

实现表格上移下移 js