如何实现点击表格行展开子行显示详细信息-php教程-PHP中文网

如何实现点击表格行展开子行显示详细信息

本文介绍如何通过 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 的终止条件 -->

⚠️ 注意：避免在主行与子行之间插入无关
（如空行、分隔符等），否则 nextUntil() 将提前停止。
✅ jQuery 逻辑优化

使用 nextUntil() 替代 next()，可批量选取从当前 .clicked 行之后、直到下一个 .clicked 行之前的所有兄弟

MusicAI
一款AI音频处理工具，主要用于AI音乐生成工具，适合需要提升相关任务效率的用户。

下载

元素：
$(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 列，子行的数量需严格一致（可用空占位或合并列），否则表格错乱。示例中扩展为 4 列（含标签），需同步调整或 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 结构或引入额外框架，兼顾安全性、可维护性与用户体验。