本文介绍如何通过 jQuery 动态实现“点击主表行 → 展开对应多条子数据行”的交互效果，解决传统 next() 只匹配首个兄弟元素的局限，并规避 SQL 注入与 DOM 结构混乱问题。

本文介绍如何通过 jquery 动态实现“点击主表行 → 展开对应多条子数据行”的交互效果，解决传统 `next()` 只匹配首个兄弟元素的局限，并规避 sql 注入与 dom 结构混乱问题。

在构建动态采购数据分析表格时，常需支持“主-从”式展开交互：用户点击某零件主行后，在其下方显示该零件在指定日期范围内所有采购记录（可能含多条成本与收货日期）。原始代码中使用 $(this).next('.sub_row') 仅能定位紧邻的第一个子行，导致其余子行无法响应；同时 PHP 中拼接 SQL 存在严重注入风险，且 HTML 结构未对主/子行做逻辑分组，使 DOM 操作失效。

✅ 正确实现要点

1. 结构优化：用语义化分组替代扁平 <tr>
   虽然 HTML 表格规范不支持 <tbody> 嵌套，但可为每组“主行 + 多个子行”添加唯一标识，例如通过 data-part-id 属性绑定关系：

   // 主行增加 data-part-id
   echo "<tr class='clicked' data-part-id='{$data['part']}'>";
   // ... 其他单元格
   echo "</tr>";
   
   // 子行统一添加 data-parent-id 并隐藏
   foreach ($sub_data as $row) {
       echo "<tr class='sub_row' data-parent-id='{$data['part']}' style='display:none;'>";
       echo "<td><b><u>Cost:</u></b></td>";
       echo "<td>{$row['cost']}</td>";
       echo "<td><b><u>Date Received:</u></b></td>";
       echo "<td>{$row['date_received']}</td>";
       echo "</tr>";
   }

2. jQuery 逻辑升级：精准定位同组子行
   使用 nextUntil() 配合 .clicked 类名，可选取当前主行之后、直到下一个主行之前的所有子行（无论数量）：

   $(document).ready(function() {
       $('.clicked').click(function() {
           // 查找从当前行开始，到下一个 .clicked 行前的所有 .sub_row
           $(this).nextUntil('.clicked', '.sub_row').slideToggle('slow');
       });
   });

   ⚠️ 注意：此方法依赖主行与子行在 DOM 中严格交替排列（即 clicked → sub_row → sub_row → ... → clicked），不可插入其他无关 <tr>。

3. 安全加固：杜绝 SQL 注入
   原始代码中直接拼接 $data['part'] 和日期变量极危险。必须改用预处理语句：

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

4. CSS 与可访问性建议

   

   jQuery 1.12.4

   jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

   下载
   • 使用 display: none 替代 visibility: collapse（后者仍占布局空间且 slideToggle 不兼容）；
   • 为提升体验，可添加展开状态指示器（如右侧箭头图标）：

     .clicked::after { content: " ▼"; font-size: 0.8em; }
     .clicked.collapsed::after { content: " ▶"; }

     并在 JS 中切换类：

     $(this).toggleClass('collapsed').nextUntil('.clicked', '.sub_row').slideToggle();

完整工作流程总结

步骤	关键操作	目的
1. 后端渲染	主行带 data-part-id；子行紧随其后，共用相同 data-parent-id	建立父子映射关系
2. 前端绑定	$('.clicked').click(...) + nextUntil('.clicked', '.sub_row')	精确控制任意数量子行显隐
3. 安全防护	全量参数化查询，禁用字符串拼接 SQL	防止数据库注入攻击
4. 体验增强	添加 CSS 过渡、状态图标、键盘可访问性（如 Enter 触发展开）	满足现代 Web 可访问性标准

通过以上改造，系统即可稳定支持单零件多采购记录的按需展开，兼顾安全性、可维护性与用户体验。