如何使用切换功能在点击的表格行下方显示HTML表单

这个问题我太熟了！本质上是因为你大概率把表单放在了循环之外，或者用了重复的ID导致jQuery每次都选中最后一个元素。咱们一步步来解决：

核心思路是让每一行数据都对应自己专属的隐藏表单行，而不是所有行共用一个表单。在foreach循环里，每输出一条数据的<tr>后，立刻跟着一个默认隐藏的<tr>，里面放对应这行的表单：

<table border="1" cellpadding="8">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th> <!-- 可选，也可以整行点击 -->
        </tr>
    </thead>
    <tbody>
        <?php foreach($db_data as $item): ?>
            <!-- 可点击的数据行 -->
            <tr class="clickable-row">
                <td><?php echo $item['id']; ?></td>
                <td><?php echo $item['name']; ?></td>
                <td>点击行编辑</td>
            </tr>
            <!-- 当前行对应的隐藏表单行 -->
            <tr class="form-container" style="display: none;">
                <!-- colspan要和表格总列数一致，避免布局错乱 -->
                <td colspan="3">
                    <form method="post" action="your-handler.php">
                        <input type="hidden" name="item_id" value="<?php echo $item['id']; ?>">
                        <label>修改名称：</label>
                        <input type="text" name="new_name" value="<?php echo $item['name']; ?>">
                        <button type="submit">保存修改</button>
                        <button type="button" class="close-form">取消</button>
                    </form>
                </td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

关键是用$(this)定位当前点击的行，再通过.next()找到它对应的表单行，而不是用全局选择器（比如ID）去匹配：

$(document).ready(function(){
    // 点击数据行切换表单显示/隐藏
    $('.clickable-row').on('click', function(){
        // 可选：如果需要同时只展开一个表单，先隐藏其他所有表单
        $('.form-container').not($(this).next()).hide();
        // 切换当前行的表单状态
        $(this).next('.form-container').toggle();
    });

    // 点击取消按钮关闭表单
    $('.close-form').on('click', function(){
        $(this).closest('.form-container').hide();
    });
});

大概率是这两个原因之一：

1. 表单放在了循环外面：所有行都指向同一个表单元素，点击任何行都会触发这个唯一的表单显示，自然只会出现在最后一行下方。
2. 用了重复的ID选择器：foreach循环生成了多个相同ID的表单，浏览器只会识别最后一个ID对应的元素，导致每次操作都只影响最后一行的表单。
3. 若表格是AJAX动态加载的，直接绑定事件到.clickable-row会失效，这时需要用事件委托：

   $(document).on('click', '.clickable-row', function(){
       // 逻辑和上面一致
   });
   

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