实现表格上移下移 js
实现表格行上移下移功能
通过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两种实现方案，可根据项目需求选择合适的方式。
