PHP+jQuery点击按钮隐藏动态生成表格行失效，如何替换为复选框实现？

现有代码问题排查 #

• 重复ID问题：HTML规范要求ID全局唯一，你循环生成的每一行隐藏输入和按钮都用了id="id"、id="validate"，jQuery选择器$("#validate")只会绑定到页面第一个匹配的元素，后续行的按钮不会触发事件
• 行ID输出缺失：<tr id="<?php $donne['id'] ?>">这里漏了echo，导致所有行的ID都是空值，自然无法通过ID选中隐藏
• 脚本加载逻辑错误：你的jQuery代码放在isset($_POST)判断里，只有提交表单刷新页面后才会输出这段脚本，而且提交按钮默认会触发表单提交刷新页面，JS还没执行页面就已经刷新，所以看不到效果
• 没必要走表单提交：如果只是前端隐藏行，完全不需要提交表单到后端，去掉form标签也可以实现

按钮版本修复方案 #

修正表格HTML代码 #

把循环内的代码改成如下：

while ($donne = $res->fetch()) {
    ?>
    <!-- 补echo输出行ID，加前缀避免纯数字ID出现兼容问题 -->
    <tr id="row_<?php echo $donne['id'] ?>">
        <td> <?php echo $donne['operateur'] ?></td>
        <td> <?php echo $donne['machine'] ?></td>
        <td> <?php echo $donne['declaration'] ?></td>
        <td>
            <!-- 去掉重复ID，用自定义属性存行ID，用class绑定事件 -->
            <button type="button" class="hide-btn" data-rowid="<?php echo $donne['id'] ?>">validate</button>
        </td>
    </tr>
    <?php
}

修正jQuery代码 #

这段代码不要放在isset($_POST)判断里，直接写到页面<head>或者页脚即可：

$(document).ready(function () {
    // 用class绑定事件，支持动态生成的元素
    $(".hide-btn").on('click', function () {
        // 更简单的写法：直接找当前按钮的父级tr隐藏，不需要依赖行ID
        $(this).closest('tr').hide();
    });
});

复选框版本适配方案 #

如果要换成复选框实现隐藏，修改代码如下：

表格部分修改 #

while ($donne = $res->fetch()) {
    ?>
    <tr>
        <td> <?php echo $donne['operateur'] ?></td>
        <td> <?php echo $donne['machine'] ?></td>
        <td> <?php echo $donne['declaration'] ?></td>
        <td>
            <!-- 换成复选框，用class绑定事件 -->
            <input type="checkbox" class="hide-checkbox"> 隐藏该行
        </td>
    </tr>
    <?php
}

jQuery部分修改 #

$(document).ready(function () {
    $(".hide-checkbox").on('change', function () {
        // 勾选时隐藏行，取消勾选时显示行
        if($(this).is(':checked')) {
            $(this).closest('tr').hide();
        } else {
            $(this).closest('tr').show();
        }
    });
});

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