循环生成HTML表格时出现意外行为 详情行错位及按钮绑定问题

问题根因 #

• 表格结构不符合规范：<tr> 标签内只能嵌套 <td>/<th> 元素，你直接在详情行的 <tr> 里放 <div>，浏览器会自动将非法嵌套的 <div> 移出表格外，导致它显示在表头上方。
• ID重复冲突：循环生成的所有详情块都用了同一个 id="details"，而HTML规范要求页面ID必须唯一，document.getElementById 永远只能匹配到第一个出现的ID元素，无法实现按钮和对应详情的绑定。
• 显示属性错误：<tr> 元素的默认display属性是 table-row，如果用 block 控制显隐会导致表格布局错乱。

修复方案 #

1. 修改PHP生成的HTML代码 #

修正详情行结构，给每个详情行加唯一ID，默认隐藏：

$html = "
    <tr class='mt-2'>
        <td>{$rank}.</td>
        <td><img src='{$image}' height='75' width='75'></td>
        <td>{$name}</td>
        <td class='bold'>\${$final_worth}B</td>
        <td class='{$class}'>\${$last_change}</td>
        <td>{$country}</td>
        <td>{$source}</td>
        <td><button class='bg-color-primary text-color-third px-2' onclick='showDetails({$cnt})'>More</button></td>
    </tr>
    <!-- 详情行加唯一ID，默认隐藏，td占满整行8列 -->
    <tr id='details_{$cnt}' style='display: none;'>
        <td colspan='8'>
            <div>lorem ipsum wahoo baby</div>
        </td>
    </tr>
";

2. 修改JS代码 #

匹配对应ID的详情行，用正确的display属性控制显隐：

function showDetails(cnt) {
    const detailRow = document.getElementById(`details_${cnt}`);
    if (detailRow.style.display === "none") {
        // tr元素用table-row属性才能正确嵌入表格结构
        detailRow.style.display = "table-row";
    } else {
        detailRow.style.display = "none";
    }
}

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