如何在jQuery中为指定类的元素数组添加动态数字ID实现Ajax行编辑？

你的思路方向是对的，但现有代码存在几个小问题：语法未闭合、未关联点击按钮到对应行、数据收集方式不准确。咱们一步步来修正优化：

第一步：关联按钮与对应行 #

其实不用硬抠class里的数字ID，jQuery的DOM遍历方法更健壮。通过$(this).closest('tr')可以直接获取点击按钮所在的<tr>元素，不管class命名怎么变都能正常工作。如果需要提取行ID，也可以从该行的id_*单元格里获取，比解析class更可靠。

第二步：动态收集该行所有可编辑字段值 #

遍历该行内的可编辑<th>元素，根据它们的class作为键，把对应文本值收集成结构化的对象，再加上行ID，这样AJAX提交的数据后端更容易处理。

完整修正后的代码 #

$(document).ready(function(){
    // 给所有.edit按钮绑定点击事件
    $("button.edit").click(function() {
        // 获取当前按钮所在的行
        const $targetRow = $(this).closest('tr');
        // 提取当前行的ID（从id_*的th元素里获取）
        const rowId = $targetRow.find('th[id^="id_"]').attr('id').split('_')[1];
        
        // 收集该行所有可编辑字段的数据
        const submitData = {
            id: rowId,
            credit_type: $targetRow.find('.credit_type').text().trim(),
            association_name: $targetRow.find('.association_name').text().trim(),
            address: $targetRow.find('.address').text().trim(),
            city: $targetRow.find('.city').text().trim(),
            province: $targetRow.find('.province').text().trim(),
            postal_code: $targetRow.find('.postal_code').text().trim(),
            country: $targetRow.find('.country').text().trim(),
            cycle_type: $targetRow.find('.cycle_type').text().trim(),
            cycle_begin: $targetRow.find('.cycle_begin').text().trim(),
            cycle_months: $targetRow.find('.cycle_months').text().trim()
        };
        
        // 发送AJAX更新请求
        $.ajax({
            url: 'update.php',
            type: 'post',
            data: submitData,
            success:function(response){
                console.log('Save successfully');
                // 这里可以添加成功后的交互，比如弹出提示或刷新行内容
            },
            error: function(xhr, status, error) {
                console.error('Save failed:', error);
                // 处理请求失败的情况，比如提示用户重试
            }
        });
    });
});

额外优化建议 #

如果后续可能新增可编辑字段，推荐用自动遍历的方式收集数据，不用手动逐个编写字段：

const submitData = { id: rowId };
// 遍历所有可编辑的th元素，自动收集键值对
$targetRow.find('th[contenteditable="true"]').each(function() {
    const fieldKey = $(this).attr('class');
    submitData[fieldKey] = $(this).text().trim();
});

这样不管新增多少字段，代码都不用修改，灵活性更强。另外trim()能去除用户输入时不小心添加的空格，避免脏数据提交到后端。

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