点击表格行内链接展开子表格时多行同时展开的问题求助

你碰到的这个问题太常见啦——核心原因就是所有子表格没有和对应的父行做唯一绑定，导致点击某个链接时，代码会选中页面上所有匹配的子表格，自然就全部展开了。下面给你一套具体的解决办法，结合你的PHP循环场景来改：

1. 给父行触发元素和子表格加唯一标识 #

在PHP的foreach循环里，我们可以用循环的索引（比如$key）或者每行数据的唯一ID（比如$row['id']），给每个触发链接和对应的子表格添加专属的标识，让它们一一对应。修改你的表格代码如下：

<table>
  <tr>
    <th>date</th>
    <th>medicine</th>
    <th>次数</th>
  </tr>
  <?php foreach($rows as $key => $row): ?>
    <tr>
      <td><?php echo htmlspecialchars($row['date']); ?></td>
      <td><?php echo htmlspecialchars($row['medicine']); ?></td>
      <td>
        <!-- 触发链接，用data-target绑定对应子表格的唯一ID -->
        <a href="javascript:void(0);" class="toggle-btn" data-target="sub-table-<?php echo $key; ?>">
          <?php echo $row['count']; ?>
        </a>
      </td>
    </tr>
    <!-- 子表格，设置唯一ID，默认隐藏 -->
    <tr>
      <td colspan="3">
        <table id="sub-table-<?php echo $key; ?>" class="sub-table" style="display: none;">
          <tr>
            <th>详细日期</th>
            <th>详细药品</th>
          </tr>
          <!-- 填充当前父行对应的详细数据 -->
          <?php foreach($row['details'] as $detail): ?>
            <tr>
              <td><?php echo htmlspecialchars($detail['date']); ?></td>
              <td><?php echo htmlspecialchars($detail['medicine']); ?></td>
            </tr>
          <?php endforeach; ?>
        </table>
      </td>
    </tr>
  <?php endforeach; ?>
</table>

这里加了htmlspecialchars()来防止XSS注入，算是个实用的小细节优化～

2. 编写精准的JavaScript点击逻辑 #

接下来写JS代码，通过data-target属性找到唯一对应的子表格，只操作这一个表格的显示/隐藏，而不是所有子表格：

// 获取所有触发按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 拿到当前按钮绑定的子表格ID
    const targetTableId = this.getAttribute('data-target');
    // 找到对应的子表格元素
    const targetTable = document.getElementById(targetTableId);
    
    // 切换显示/隐藏状态
    targetTable.style.display = targetTable.style.display === 'none' ? 'table' : 'none';
  });
});

额外优化小技巧 #

如果你觉得直接操作style不够优雅，可以用CSS类来控制：

.sub-table.hidden {
  display: none;
}

然后JS代码改成切换类名：

targetTable.classList.toggle('hidden');

这样代码更整洁，也方便后续扩展样式～

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