本文介绍如何通过 jquery 动态控制表格中父子行的显示逻辑，使用户点击主行后展开其关联的多条子行数据（如采购成本与日期），解决原代码仅显示首条子记录的问题。
本文介绍如何通过 jquery 动态控制表格中父子行的显示逻辑，使用户点击主行后展开其关联的多条子行数据（如采购成本与日期），解决原代码仅显示首条子记录的问题。
要实现“点击主表行 → 展开对应全部子行”的交互效果，关键在于两点：HTML 结构的语义化组织 和 jQuery 选择器的精准匹配。原始代码使用 $(this).next('.sub_row') 只能匹配紧邻的下一个 .sub_row 元素，因此仅展开第一条子行；而实际需求是展开当前主行之后、下一主行之前的所有子行——这正是 nextUntil('.clicked') 的核心作用。
✅ 正确的 HTML 结构设计
主行（.clicked）与所属子行（.sub_row）必须在 DOM 中连续排列，且所有子行都位于其父主行之后、下一个主行之前。PHP 循环中需确保每个主行后紧跟其全部子行，结构如下：
<tr class="clicked">...</tr> <tr class="sub_row">...</tr> <tr class="sub_row">...</tr> <tr class="sub_row">...</tr> <tr class="clicked">...</tr> <!-- 下一个父行，作为 nextUntil 的终止条件 -->
⚠️ 注意：避免在主行与子行之间插入无关 <tr>（如空行、分隔符等），否则 nextUntil() 将提前停止。
✅ jQuery 逻辑优化
使用 nextUntil() 替代 next()，可批量选取从当前 .clicked 行之后、直到下一个 .clicked 行之前的所有兄弟 <tr> 元素：
$(document).ready(function() {
$('.clicked').click(function() {
$(this).nextUntil('.clicked').slideToggle('slow');
});
});该写法天然支持任意数量的子行，无需预知子行个数，也无需为每组子行添加唯一 ID 或嵌套容器。
✅ PHP 数据渲染建议（安全 & 清晰）
-
避免 SQL 拼接注入：原始代码中直接拼接 $data['part']、$fd、$sd 存在严重 SQL 注入风险。应改用 PDO 预处理语句：
$stmt = $conn->prepare("SELECT cost, date_received FROM v_po_history WHERE part = ? AND location = 'HS' AND date_received BETWEEN ? AND ?"); $stmt->execute([$data['part'], $fd, $sd]); $sub_data = $stmt->fetchAll(PDO::FETCH_ASSOC); - 子行字段对齐：主表有 8 列，子行 <tr> 的 <td> 数量需严格一致（可用空 <td> 占位或合并列），否则表格错乱。示例中扩展为 4 列（含标签），需同步调整 <th> 或 CSS colspan。
✅ CSS 控制初始隐藏
.sub_row {
display: none; /* 推荐用 display 而非 visibility: collapse，避免布局干扰 */
background-color: #f9f9f9;
}display: none 确保子行初始不可见且不占空间；visibility: collapse 在表格中行为复杂，可能引发渲染异常。
✅ 完整工作流程总结
- PHP 渲染时，按「主行 → 所有子行」顺序输出，保证 DOM 连续；
- jQuery 绑定 .clicked 点击事件，用 nextUntil('.clicked') 精准定位子行范围；
- 调用 slideToggle() 实现平滑展开/收起；
- CSS 隐藏子行，确保页面加载时整洁。
此方案完全兼容动态数据（如日期范围筛选），无需修改 HTML 结构或引入额外框架，兼顾安全性、可维护性与用户体验。
