如何用jQuery实现点击PHP生成表格按钮展开对应隐藏行

没问题，我来帮你搞定这个需求！要实现点击每行按钮只展开对应隐藏行，核心是让父行和对应的隐藏子行建立关联，然后通过JavaScript控制显示/隐藏。我给你一步步拆解：

1. 调整PHP生成的HTML结构 #

首先你当前的代码有个小问题：在while循环里每次都输出<tbody>，这会导致每个父行都在单独的tbody里，既不符合HTML规范，也会给后续JS操作添麻烦。我们要把<tbody>放在循环外面，然后给每个父行和对应的隐藏子行加上唯一关联标识，比如用数据库里的主键（比如$row['id']）来绑定它们。

修改后的PHP代码大概是这样：

<?php
if ($result = mysqli_query($link, $query)) {
    // 把tbody放在循环外面，保证表格结构正确
    echo '<tbody>';
    while ($row = mysqli_fetch_array($result)) {
        // 父行，加上data-row-id标识用于关联子行
        echo '<tr class="parent" data-row-id="'. $row['id'] .'">
                <td align="left">'. $row['reference'] . '</td>
                <td align="left">'. $row['animal'] . '</td>
                <td>
                    <!-- 切换按钮，用data-target绑定对应子行的ID -->
                    <button class="toggle-btn" data-target="'. $row['id'] .'">展开详情</button>
                </td>
              </tr>';
        
        // 对应的隐藏子行，默认隐藏，用类名+唯一ID和父行关联
        echo '<tr class="child-row child-row-'. $row['id'] .'" style="display: none;">
                <td colspan="3">
                    <!-- 这里放你要展开的隐藏内容，比如更多数据详情 -->
                    动物详情：参考编号「'. $row['reference'] .'」，品种「'. $row['animal'] .'」
                </td>
              </tr>';
    }
    echo '</tbody>';
}
?>

2. 编写JavaScript控制逻辑 #

接下来用原生JavaScript实现点击按钮切换对应子行的显示状态，不用依赖第三方库，兼容性更好：

// 获取所有切换按钮
const toggleButtons = document.querySelectorAll('.toggle-btn');

toggleButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 获取按钮绑定的目标子行ID
        const targetRowId = this.getAttribute('data-target');
        // 找到对应的隐藏子行
        const childRow = document.querySelector('.child-row-' + targetRowId);
        
        // 切换显示/隐藏状态，同时更新按钮文字
        if (childRow.style.display === 'none') {
            childRow.style.display = 'table-row';
            this.textContent = '收起详情';
        } else {
            childRow.style.display = 'none';
            this.textContent = '展开详情';
        }
    });
});

关键细节说明 #

• 关联标识：用data-target属性和child-row-xxx类名，把按钮和对应的子行精准绑定，确保点击按钮只会操作自己对应的那一行，不会干扰其他行。
• <tbody>位置：把<tbody>放在循环外，保证整个表格结构符合HTML规范，也让JS查找元素更顺畅。
• 子行布局：子行用colspan="3"（根据你表格的实际列数调整），让隐藏内容跨列显示，视觉上更统一美观。

这样修改后，点击每行的按钮就只会展开/收起对应行的隐藏内容啦！

内容的提问来源于stack exchange，提问作者R.Anderson