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 节点交换而非内容交换
• 考虑添加边界条件检查（如行是否存在）