点击表格父行展开子行附加信息 修复仅显示首个子行问题

现有代码三个核心bug导致功能不符合预期：

• jQuery选择器逻辑错误：next('.sub_row')只会匹配紧邻当前父行的第一个子行，后续连续的多条子行不会被选中，所以点击后只能展开第一条数据
• 表格结构不规范：子行的单元格数量和主表头8列不匹配，直接插入主表会出现列错位；visibility:collapse属性在不同浏览器对table行的隐藏效果兼容性差，还会和jQuery的滑行动画冲突
• 代码存在隐患：SQL语句直接拼接用户传入的日期、零件号参数，有SQL注入风险；主表table标签最后少写了闭合尖括号，属于语法错误

不需要更换整体实现，只要调整三块代码即可：

1. PHP/HTML部分调整 #

给每个父行加唯一ID标记，同一父行下的子行加关联属性，子行单元格用colspan跨满主表列数，内部嵌独立小表格展示明细数据，同时把SQL查询改成PDO预处理避免注入，补全语法错误。

<?php
echo "
<table id='main'>
<thead>
<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>
</thead>
<tbody>";
$rowId = 0;
while ($data = $sql->fetch(PDO::FETCH_ASSOC)){
    $rowId++;
    // 父行加标记类和唯一ID
    echo "<tr class='parent-row' data-id='".$rowId."'>
        <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>";
    // 改用PDO预处理传参，避免SQL注入
    $sub_sql = $conn->prepare("SELECT cost, date_received, qty_received FROM v_po_history WHERE part = ? AND location = 'HS' AND date_received >= ? AND date_received <= ?");
    $sub_sql->execute([$data['part'], $fd, $sd]);
    // 子行关联对应父行ID，跨列内嵌明细表格
    echo "<tr class='sub-row' data-parent='".$rowId."'>
        <td colspan='8'>
            <table class='sub-table'>
                <thead>
                    <tr>
                        <th>采购成本</th>
                        <th>收货日期</th>
                        <th>收货数量</th>
                    </tr>
                </thead>
                <tbody>";
    while ($sub_data = $sub_sql->fetch(PDO::FETCH_ASSOC)){
        echo "<tr>
            <td>".$sub_data['cost']."</td>
            <td>".$sub_data['date_received']."</td>
            <td>".$sub_data['qty_received']."</td>
        </tr>";
    }
    echo "      </tbody>
            </table>
        </td>
    </tr>";
}
echo "</tbody>
</table>";
?>

2. jQuery部分调整 #

用nextUntil方法选中当前父行之后、下一个父行之前的所有连续子行，不管一个父行下挂多少条明细都能全部匹配，同时初始化时默认隐藏所有子行：

$(document).ready(function() {
    // 默认隐藏所有子行
    $('.sub-row').hide();
    $('.parent-row').click(function() {
        // 选中当前父行对应的所有子行，触发展开/收起动画
        $(this).nextUntil('.parent-row', '.sub-row').slideToggle('slow');
        // 如果需要手风琴效果（展开当前行时自动收起其他行），放开下面这行注释即可
        // $('.sub-row').not($(this).nextUntil('.parent-row', '.sub-row')).slideUp();
    });
});

3. CSS部分调整 #

删除原来的visibility隐藏规则，补充基础样式区分父行和子表格，提升可读性：

#main {
    width: 100%;
    border-collapse: collapse;
}
#main th, #main td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: left;
}
.parent-row {
    cursor: pointer;
    background: #f8f8f8;
}
.parent-row:hover {
    background: #f0f0f0;
}
.sub-table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
}
.sub-table th, .sub-table td {
    border: 1px solid #e5e5e5;
    padding: 6px;
}

调整后不管单个零件关联多少条成本、日期记录，点击父行都会全部展开/收起，不会再出现只显示第一条的问题，动态传入日期范围的查询逻辑也不会受影响。

内容的提问来源于stack exchange，提问作者SkylarP