如何将动态生成表格的选中行数据回传至服务器？

看起来你遇到了两个核心问题：一是动态生成的复选框无法用jQuery选中，二是如何高效收集选中行的数据回传服务器。我来一步步帮你解决：

问题根源分析 #

1. 复选框选择器无效：你的表格是通过AJAX异步加载的，$(document).ready()执行时表格还没渲染到DOM里，所以直接通过$('#t1')找不到元素。
2. ID生成不合理：依赖后端的$tableRowCounter生成ID不够可靠，比如分页或者数据更新后序号会混乱，应该用数据本身的唯一标识（比如数据库主键）来绑定。

解决方案步骤 #

第一步：重构后端代码，给行和复选框绑定唯一标识 #

修改fetch.php，把每行的核心数据（比如Person_changes_Article的ID、文章ID等）存在<tr>的data-*属性里，同时给复选框设置和数据关联的value，而不是用序号当ID：

<?php
include '../../variables.php';
include '../../_Database.php';
$db = Database::getInstance();
$minDuration;
$maxDuration;
$tableRowCounter = 0; // 初始化计数器
$output = '<table class="table" id="data-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Artikel</th>
<th scope="col">Durchlaufzeit</th>
<th scope="col">Neue Durchlaufzeit</th>
<th scope="col">Bestätigen</th>
</tr>
</thead>
<tbody> ';
// 优化查询：用JOIN替代嵌套查询，提升性能
$result = mysqli_query($db->link, "
    SELECT pca.*, a.* 
    FROM `Person_changes_Article` pca
    JOIN `Article` a ON pca.Article_idArticle = a.idArticle
");
while ($row = mysqli_fetch_assoc($result)) {
    $minDuration = ($row['duration'] / 10) * 9;
    $maxDuration = ($row['duration'] / 10) * 11;
    if ($row['newDuration'] < $minDuration OR $row['newDuration'] > $maxDuration) {
        $tableRowCounter++;
        // 给tr添加data属性存储核心数据
        $output .= '
        <tr data-change-id="'.$row['idPerson_changes_Article'].'" data-article-id="'.$row['idArticle'].'">
        <th scope="row">'.$tableRowCounter.'</th>
        <td>'. $db->getArticleString($row["idArticle"]) ." - " . $row["idArticle"]. '</td>
        <td class="duration">'. $row["duration"] .'</td>
        <td class="new-duration">'. $row["newDuration"] .'</td>
        <td><input type="checkbox" class="selection-checkbox" name="selected_changes[]" value="'.$row['idPerson_changes_Article'].'"></td>
        </tr>
        ';
    }
}
$output .= '
</tbody>
</table>
<!-- 添加提交按钮 -->
<button id="submit-selected" class="btn btn-primary mt-3">选中项提交</button>';
echo $output;
?>

这里做了几个优化：

• 用JOIN替代嵌套查询，大幅提升数据库查询性能
• 给<tr>添加data-change-id和data-article-id存储数据主键，方便前端关联
• 给复选框加统一类名selection-checkbox，value设为数据主键，避免依赖动态序号
• 给需要提取的td添加类名（比如duration、new-duration），简化前端数据提取逻辑
• 新增提交按钮，触发数据回传操作

第二步：修改前端代码，处理动态元素并收集数据 #

因为表格是AJAX加载的，要在load_data()的success回调里绑定事件，确保元素存在后再操作。下面是修改后的index.php代码：

<div id="result"></div>
<script>
$('#loading-image').show();
function load_data() {
    $.ajax({
        url:"fetch.php", 
        method:"POST",
        success:function(data) {
            $('#result').html(data);
            // 表格加载完成后绑定提交按钮事件
            bindSubmitEvent();
            $('#loading-image').hide();
        }
    });
}

function bindSubmitEvent() {
    $('#submit-selected').off('click').on('click', function() {
        // 收集所有选中的行数据
        let selectedData = [];
        $('.selection-checkbox:checked').each(function() {
            let $row = $(this).closest('tr');
            // 从tr的data属性和td中提取数据
            let rowData = {
                changeId: $row.data('change-id'),
                articleId: $row.data('article-id'),
                artikel: $row.find('td:eq(0)').text(),
                duration: $row.find('.duration').text(),
                newDuration: $row.find('.new-duration').text()
            };
            selectedData.push(rowData);
        });

        // 如果有选中项，发送AJAX到服务器
        if (selectedData.length > 0) {
            $.ajax({
                url: 'process-selected.php', // 你的后端处理脚本
                method: 'POST',
                contentType: 'application/json', // 用JSON格式发送数据
                data: JSON.stringify(selectedData),
                success: function(response) {
                    alert('提交成功！');
                    load_data(); // 提交后刷新表格
                },
                error: function() {
                    alert('提交失败，请重试');
                }
            });
        } else {
            alert('请至少选择一项');
        }
    });
}

// 初始化加载数据
load_data();
</script>

这里的关键处理：

• 在AJAX的success回调里调用bindSubmitEvent()，确保按钮存在后再绑定事件
• 用$(this).closest('tr')找到复选框所在的行，彻底摆脱对ID的依赖
• 从行的data-*属性和带类名的td中提取数据，结构清晰易维护
• 把数据转成JSON格式发送，后端解析更方便

第三步：后端接收数据（process-selected.php示例） #

如果用JSON格式接收，后端可以这样处理：

<?php
include '../../variables.php';
include '../../_Database.php';
$db = Database::getInstance();

// 接收JSON格式的请求数据
$jsonData = file_get_contents('php://input');
$selectedData = json_decode($jsonData, true);

if (!empty($selectedData)) {
    foreach ($selectedData as $item) {
        // 这里可以根据业务需求处理数据，比如更新数据库
        // $stmt = $db->link->prepare("UPDATE Person_changes_Article SET ... WHERE idPerson_changes_article = ?");
        // $stmt->bind_param("i", $item['changeId']);
        // $stmt->execute();
        echo "已处理ID为".$item['changeId']."的记录\n";
    }
    echo json_encode(['status' => 'success']);
} else {
    echo json_encode(['status' => 'error', 'message' => '无有效数据']);
}
?>

额外提示 #

• 事件委托替代方案：如果不想每次AJAX加载后都绑定事件，可以用事件委托，直接在document上绑定：

  $(document).on('click', '#submit-selected', function() {
      // 收集数据的逻辑和上面一致
  });
  

  这样不管按钮什么时候加载，事件都会生效。
• 避免重复绑定：如果用bindSubmitEvent()，记得用.off('click')先解绑再绑定，防止多次AJAX加载后事件触发多次。

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