如何用jQuery删除表格行后重置TD内输入框的ID与序号值？

核心思路是在删除行后，遍历所有剩余数据行，重新从1开始分配连续的SR序号，并更新每行内所有输入元素的ID，同时重新绑定自动补全事件（避免ID变更后功能失效）。

1. 定义重置行的核心函数 #

这个函数会遍历表格行，统一更新序号、ID并重新初始化自动补全：

function resetTableRows() {
    // 遍历表格tbody下的所有数据行（排除表头）
    $('table tbody tr').each(function(index) {
        const newRowIndex = index + 1;
        
        // 更新SR列输入框的数值与ID
        const srInput = $(this).find('.sr-input');
        srInput.val(newRowIndex);
        srInput.attr('id', `sr-${newRowIndex}`);
        
        // 更新该行所有输入框的连续ID
        $(this).find('input').each(function() {
            const oldId = $(this).attr('id');
            if (oldId) {
                // 用正则替换ID末尾的数字为新序号，适配如"item-name-1"或"input1"的格式
                const newId = oldId.replace(/\d+$/, newRowIndex);
                $(this).attr('id', newId);
            }
        });
        
        // 重新绑定第二列的自动补全功能（替换为你的实际逻辑）
        const autoCompleteInput = $(this).find('.autocomplete-col');
        // 先销毁旧的自动补全实例，避免冲突
        autoCompleteInput.autocomplete('destroy');
        // 重新初始化自动补全
        autoCompleteInput.autocomplete({
            source: 'your-autocomplete-source.php', // 你的Ajax数据源地址
            select: function(event, ui) {
                // 自动填充当前行其他列的逻辑，注意用closest定位当前行
                const currentRow = $(this).closest('tr');
                currentRow.find('.qty-input').val(ui.item.quantity);
                currentRow.find('.price-input').val(ui.item.unit_price);
                // 根据你的表格结构补充其他列的填充代码
            }
        });
    });
}

2. 在删除行事件中调用重置函数 #

确保删除行后立即触发序号与ID的重置：

// 绑定删除按钮的点击事件（假设删除按钮有.delete-row类）
$('table').on('click', '.delete-row', function() {
    // 删除当前行
    $(this).closest('tr').remove();
    // 执行重置操作
    resetTableRows();
});

关键细节说明 #

• 选择器准确性：确保只遍历表格的数据行（用tbody tr），不要包含表头行，避免序号混乱。
• ID格式兼容：正则表达式/\d+$/)会匹配ID末尾的所有数字，适配绝大多数连续ID的命名规则，如果你的ID格式特殊，可调整正则或拆分逻辑。
• 自动补全重绑定：因为输入框ID变更后，原有的基于ID的事件绑定会失效，所以必须销毁旧实例并重新初始化。如果你的自动补全是通过类名绑定的，可简化这一步，但重新绑定更稳妥。
• 添加行后的可选调用：如果添加行的逻辑偶尔出现序号偏差，也可以在添加行后调用resetTableRows()，确保全局序号一致。

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