php - 循环分组 2 个 HTML 表格行

Question

我有一个来自 DB 的表查询。该表几乎没有来自数据库的信息。我想要的其余信息将在我单击可折叠时显示。因此，为此我想要在每个查询行之后的可折叠行。下面是我的代码。

它正在创建与查询行一样多的可折叠行，但所有行都在一起并且所有可折叠都在一起。此外，可折叠组件将出现在查询行之前，尽管它应该位于查询行下方。

<table class="blueTable">
<thead>
    <tr>
        <th>Broadband ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Circle</th>
        <th>SSA</th>
        <th>SDCA</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <?php while($row = mysqli_fetch_array($searchqry)):?>
    <tr>
        <td><?php echo $row['bb_id'];?></td>
        <td><?php echo $row['name'];?></td>
        <td><?php echo $row['email'];?></td>
        <td><?php echo $row['phone'];?></td>
        <td><?php echo $row['circle'];?></td>
        <td><?php echo $row['ssa'];?></td>
        <td><?php echo $row['sdca'];?></td>
    </tr>
    <tr><button class="collapsible">Open Section 3</button>
        <div class="content">
            <p>Lorem ipsum</p>
        </div>
    </tr>
    <?php endwhile;?>       
</tbody>
</table>

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++)
    {
        coll[i].addEventListener("click", function()
        {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight)
            {
                content.style.maxHeight = null;
            }
            else
            {
                content.style.maxHeight = content.scrollHeight + "px";
            } 
        });
    }
</script> 

标签： phpmysqlhtml-table

Answer 1

<tr>
   <td colspan="8">
      <button class="collapsible">Open Section 3</button>
       <div class="content">
         <p>Lorem ipsum</p>
       </div>
   </td>
</tr>

需要在行内放置一个单元格。