ASP.NET C#中jQuery按索引并行删除两个HTML表格行的问题排查

错误原因分析 #

出现第二个表格删错行的核心问题，大概率是行索引的计算范围与删除目标不匹配：

• 若直接用$(tr).index()，会计算该行在整个表格（含thead行）中的位置，如果两个表格的表头结构不一致（比如一个有thead一个没有，或者thead行数不同），索引就会偏移；
• 另一种可能是删除第二个表格行时，选择器直接取了tr，没有限定在tbody内，导致把表头行也算进了索引范围，最终删错目标行。

修正方案 #

1. 统一基于tbody计算和操作行 #

确保两个表格都有<tbody>标签，所有数据行都放在tbody内，这样索引计算只针对数据行，不会被表头干扰。

2. 修正删除逻辑（带事件委托） #

用事件委托处理动态生成的删除按钮，同时精准计算数据行在tbody内的索引，再删除对应表格的行：

// 事件委托：监听table1内的delete按钮点击
$('#table1').on('click', '.delete-btn', function() {
    // 获取当前行在table1 tbody中的索引
    const $currentRow = $(this).closest('tr');
    const rowIndex = $currentRow.closest('tbody').find('tr').index($currentRow);
    
    // 删除table1的当前行
    $currentRow.remove();
    
    // 删除table2 tbody中对应索引的行
    $('#table2 tbody').find('tr').eq(rowIndex).remove();
});

3. 确保添加行的一致性 #

添加行时必须同时往两个表格的tbody中添加，保证行的数量和顺序完全对应：

$('#addBtn').click(function() {
    // 构造要添加的数据行（示例内容，可根据实际需求替换）
    const table1Row = `
        <tr>
            <td>${new Date().toLocaleString()}</td>
            <td><button class="delete-btn">Delete</button></td>
        </tr>
    `;
    const table2Row = `
        <tr>
            <td>${new Date().toLocaleString()}</td>
        </tr>
    `;
    
    // 同步添加到两个表格的tbody
    $('#table1 tbody').append(table1Row);
    $('#table2 tbody').append(table2Row);
});

4. HTML结构规范 #

确保两个表格的结构统一，都包含thead和tbody：

<!-- 表格1 -->
<table id="table1" border="1">
    <thead>
        <tr><th>数据</th><th>操作</th></tr>
    </thead>
    <tbody>
        <!-- 动态行将添加到这里 -->
    </tbody>
</table>

<!-- 表格2 -->
<table id="table2" border="1">
    <thead>
        <tr><th>数据</th></tr>
    </thead>
    <tbody>
        <!-- 动态行将添加到这里 -->
    </tbody>
</table>

<button id="addBtn">Add</button>

内容的提问来源于stack exchange，提问作者Kumar