如何使用JavaScript遍历表格行并交换任意两个非连续表格行

API 探路者

2026-10-7

表格行交换实现方案

jQuery没有内置专门用于交换表格行的方法，你可以自行封装通用方法实现任意连续/非连续行的交换，具体实现逻辑和代码如下：

核心实现思路

提前获取两个目标行的DOM对象，避免移动元素时索引偏移导致找错目标
通过临时副本占位的方式规避非连续元素移动时的位置错乱问题

封装通用交换方法

// 参数支持传入jQuery对象或者行选择器字符串
function swapTableRows($rowA, $rowB) {
    // 统一转成jQuery实例
    $rowA = $($rowA);
    $rowB = $($rowB);
    // 非行元素、同一个行直接跳过
    if (!$rowA.is('tr') || !$rowB.is('tr') || $rowA.is($rowB)) {
        return;
    }
    // 创建临时副本占住行A的原位置
    const $tempRow = $rowA.clone();
    $tempRow.insertBefore($rowA);
    // 移动行B到行A原位置
    $rowB.insertBefore($tempRow);
    // 移动行A到行B原位置
    $rowA.insertBefore($rowB);
    // 删除临时占位副本
    $tempRow.remove();
}

使用示例

交换两个非连续行

比如交换表格第1行和第4行（行索引从0开始计数）：

swapTableRows($('table tbody tr:eq(0)'), $('table tbody tr:eq(3)'));

批量交换相邻奇偶行

$('table tbody tr:nth-child(odd)').each(function() {
    const $nextRow = $(this).next('tr');
    if ($nextRow.length) {
        swapTableRows($(this), $nextRow);
    }
});