如何实现点击表格行展开对应多条子行数据-php教程-PHP中文网

如何实现点击表格行展开对应多条子行数据

本文详解如何通过 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 "

"; while ($data = $sql->fetch(PDO::FETCH_ASSOC)) { // 主行 echo ""; // 查询所有关联子记录（防 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 ""; } } echo "

Part	Description	Location	Lowest Cost Date	Lowest Cost	Highest Cost Date	Highest Cost	Difference
{$data['part']}	{$data['description']}	HS	{$data['min_cost_date']}	{$data['min_cost']}	{$data['max_cost_date']}	{$data['max_cost']}	" . ($data['max_cost'] - $data['min_cost']) . "
Cost:	{$row['cost']}	Date Received:	{$row['date_received']}

jQuery 交互逻辑（精准定位所有子行）

Manus

一款通用型AI智能体平台，可根据用户提出的目标自主拆解任务并执行多步骤工作，适合处理研究、分析和内容制作等复杂任务。

下载

$(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);