循环中的第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> 

Answer 1

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

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

Answer 2

您在第二个<td>中缺少<tr>。