js 实现tr互换
实现表格行互换的 JavaScript 方法
获取表格行元素
使用 document.querySelector 或 getElementById 获取表格及目标行元素。例如：
const table = document.getElementById('myTable');
const rows = table.getElementsByTagName('tr');交换行内容
通过临时变量存储行内容，再交换两行的 innerHTML：
function swapRows(row1, row2) {
const temp = row1.innerHTML;
row1.innerHTML = row2.innerHTML;
row2.innerHTML = temp;
}交换行 DOM 节点
直接操作 DOM 节点实现位置交换：
function swapDomRows(row1, row2) {
const parent = row1.parentNode;
const next1 = row1.nextSibling;
const next2 = row2.nextSibling;
parent.insertBefore(row1, next2);
parent.insertBefore(row2, next1);
}事件绑定示例
通过按钮触发行交换：
document.getElementById('swapBtn').addEventListener('click', () => {
swapRows(rows[1], rows[2]); // 交换第2行和第3行
});动画效果增强
添加 CSS 过渡效果提升交互体验：
tr {
transition: all 0.3s ease;
}注意事项
- 确保行索引有效，避免越界错误
- 如需保留事件监听器，建议采用 DOM 节点交换而非内容交换
- 考虑添加边界条件检查（如行是否存在）
