如何动态获取表格多表单ID及字段值 识别提交触发的对应表单

现有代码存在3个直接导致功能失效的问题：

• HTML结构不符合规范：<form>标签直接嵌套在<tr>和<td>之间，浏览器渲染时会自动将form标签移出表格，破坏DOM关联关系
• 元素ID重复：循环生成的输入框均使用相同固定ID，违反HTML页面ID唯一的规范，会导致选择器取值错乱
• 选择器不匹配：提交按钮未绑定row-submit类，输入框未设置对应类名，jQuery代码无法定位到目标元素取值

第一步：修正PHP端循环输出代码 #

移除不必要的form标签（AJAX提交不需要原生form结构），将重复ID改为对应类名，给提交按钮添加绑定类，同时通过data-*属性存储当前行对应的数据ID：

<?php foreach ($get_subscribed_data as $filtered_items) { ?>
<tr>
    <td>
        <input type="text" class="form-group user_account_name" value="<?php echo htmlspecialchars($filtered_items->user_account_name); ?>">
        <?php echo htmlspecialchars($filtered_items->user_account_name); ?>
    </td>
    <td>
        <input type="text" class="form-group user_project_name" value="<?php echo htmlspecialchars($filtered_items->user_project_name); ?>">
        <?php echo htmlspecialchars($filtered_items->user_project_name); ?>
    </td>
    <td>
        <input type="text" class="form-group start_date" value="<?php echo htmlspecialchars($filtered_items->start_date); ?>">
        <?php echo htmlspecialchars($filtered_items->start_date); ?>
    </td>
    <td>
        <input type="text" class="form-group due_date" value="<?php echo htmlspecialchars($filtered_items->due_date); ?>">
        <?php echo htmlspecialchars($filtered_items->due_date); ?>
    </td>
    <td>
        <button type="button" class="btn-primary btn-sm row-submit" data-row-id="<?php echo $filtered_items->id; ?>">提交</button>
    </td>
</tr>
<?php } ?>

输出变量时增加htmlspecialchars转义，避免特殊字符破坏HTML结构

第二步：修正jQuery提交逻辑 #

通过DOM父子关联定位当前点击按钮所属的表格行，读取行内输入框值和存储的数据ID，传给后端即可识别提交来源：

$(document).ready(function() {
    // 事件委托绑定，支持动态生成的表格行
    $(document).on('click', '.row-submit', function(e) {
        e.preventDefault();
        // 定位当前按钮所属的表格行
        const $currentRow = $(this).closest('tr');
        // 读取当前行对应的数据ID
        const rowId = $(this).data('row-id');
        
        $.ajax({
            type: "POST",
            url: ajaxurl,
            data: {
                action: "send_modification_training_data",
                // 传入行ID，后端直接定位要更新的数据库记录
                row_id: rowId,
                user_account_name: $currentRow.find('.user_account_name').val(),
                user_project_name: $currentRow.find('.user_project_name').val(),
                start_date: $currentRow.find('.start_date').val(),
                due_date: $currentRow.find('.due_date').val()
            },
            success: function(response) {
                console.log('提交返回结果：', response);
                // 可在此处添加提交成功后的提示、页面刷新逻辑
            },
            error: function(err) {
                console.log('提交异常：', err);
            }
        });      
    });
});

逻辑说明 #

• 不需要为每个按钮、表单设置独立ID，通过DOM节点的层级关联，点击按钮时向上查找所属行，就能精准获取当前行的所有输入值，不会和其他行数据混淆
• 数据主键存在按钮的自定义data-row-id属性上，点击时直接读取即可，不需要额外做ID匹配
• 事件委托的绑定方式可以兼容后续动态新增的表格行，不需要重复绑定事件
• 后端拿到传入的row_id参数，即可定位到对应数据库记录完成更新

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