本文详解如何通过 jquery 动态控制表格中父子行的显示与隐藏，解决“点击主行后仅显示首条子行”的常见问题，确保每个主行能正确关联并展开其全部关联子数据。
本文详解如何通过 jquery 动态控制表格中父子行的显示与隐藏，解决“点击主行后仅显示首条子行”的常见问题，确保每个主行能正确关联并展开其全部关联子数据。
在构建动态采购数据报表时，常需以“主-子”结构展示层级信息：主表行显示零件汇总（如最低/最高成本），点击后展开该零件所有采购明细（多条成本与收货日期）。原始代码使用 $(this).next('.sub_row') 只匹配紧邻的第一个子行，导致其余子行无法响应；同时 CSS 使用 visibility: collapse 会保留占位空间，影响动画和布局。
✅ 正确实现的关键点
- HTML 结构优化：确保所有子行紧跟对应主行之后，且不被其他 .clicked 行中断。PHP 中需将同一零件的所有子行连续输出在该主行下方。
- jQuery 选择器升级：改用 .nextUntil('.clicked') —— 它会选取当前主行之后、直到下一个 .clicked 行之前的所有兄弟元素（即全部连续的 .sub_row），完美匹配多条子数据场景。
- CSS 隐藏方式调整：使用 display: none 替代 visibility: collapse，避免布局干扰，并支持 toggle() 的平滑切换（若需动画，可配合 slideToggle() + show/hide 手动封装）。
✅ 修正后的核心代码示例
PHP 输出（关键改进：fetchAll() + foreach 确保全部子行输出）
echo "<table id='main'>
<tr>
<th>Part</th><th>Description</th><th>Location</th>
<th>Lowest Cost Date</th><th>Lowest Cost</th>
<th>Highest Cost Date</th><th>Highest Cost</th><th>Difference</th>
</tr>";
while ($data = $sql->fetch(PDO::FETCH_ASSOC)) {
// 主行
echo "<tr class='clicked'>
<td>{$data['part']}</td>
<td>{$data['description']}</td>
<td>HS</td>
<td>{$data['min_cost_date']}</td>
<td>{$data['min_cost']}</td>
<td>{$data['max_cost_date']}</td>
<td>{$data['max_cost']}</td>
<td>" . ($data['max_cost'] - $data['min_cost']) . "</td>
</tr>";
// 查询所有关联子记录（防 SQL 注入推荐使用 PDO 预处理，此处为逻辑示意）
$sub_sql = $conn->query("SELECT cost, date_received FROM v_po_history
WHERE part = '{$data['part']}'
AND location = 'HS'
AND date_received BETWEEN '$fd' AND '$sd'");
$sub_rows = $sub_sql->fetchAll(PDO::FETCH_ASSOC);
foreach ($sub_rows as $row) {
// 子行：4列布局（标签+值成对），确保结构清晰
echo "<tr class='sub_row'>
<td><b><u>Cost:</u></b></td>
<td>{$row['cost']}</td>
<td><b><u>Date Received:</u></b></td>
<td>{$row['date_received']}</td>
</tr>";
}
}
echo "</table>";jQuery 交互逻辑（精准定位所有子行）
$(document).ready(function() {
$('.clicked').click(function() {
// 查找当前行之后、下一个.clicked行之前的所有.sub_row
$(this).nextUntil('.clicked', '.sub_row').toggle('slow');
});
});CSS 样式（基础隐藏 + 可选视觉区分）
.sub_row {
display: none; /* 必须用 display:none */
background-color: #f9f9f9;
border-bottom: 1px solid #eee;
}
/* 可选：为主行添加悬停提示 */
.clicked:hover {
background-color: #eef7ff;
cursor: pointer;
}⚠️ 重要注意事项
-
安全性警示：示例中 SQL 拼接存在 SQL 注入风险！生产环境务必改用 PDO 预处理语句：
$stmt = $conn->prepare("SELECT cost, date_received FROM v_po_history WHERE part = ? AND location = ? AND date_received BETWEEN ? AND ?"); $stmt->execute([$data['part'], 'HS', $fd, $sd]); $sub_rows = $stmt->fetchAll(PDO::FETCH_ASSOC); - 性能优化：若数据量大，建议将子数据通过 AJAX 按需加载，而非一次性渲染全部子行。
- 无障碍访问：为 .clicked 行添加 aria-expanded 属性，并在 JS 中同步更新，提升屏幕阅读器兼容性。
- 样式隔离：.sub_row 应避免与主表头 th 或其他功能行类名冲突，确保 nextUntil() 精准匹配。
通过以上重构，即可实现“一主多子”的可靠展开效果：每次点击仅触发当前主行关联的全部子行显示/隐藏，结构清晰、逻辑健壮、易于维护。
