Javascript 如何为下面的代码而不是行创建一组新的列？

我正在尝试为我的同事创建一个信息网站，他们可以添加他们所有的信息，这样他们就不需要写下来了。变量$cam_loc显示特定设备的位置。当我使用下面的代码而不是每个位置使用一个面板标题时，如果该位置有多个设备，则会复制该位置。我想创建一个条件来验证该位置是否重复，如果重复，则不应添加另一个面板标题，而应在该位置添加另一列，其中包含第二对信息

代码如下：

<?php
$cam = $db->prepare('select * from camere');
$cam->execute();

while ($cams = $cam->fetch(PDO::FETCH_OBJ)) {?>
  <ul class="list" style="list-style: none;">                                                                               
    <div class="panel panel-primary">
      <div class="panel-heading">
        <li><h3 class="panel-title"><?php $cam_loc = $cams->locatie; ?><?php echo $cam_loc;?></h3> </li>
      </div>

      <div class="panel-body">
        <div class="row">
          <div class="col-md-2" align="center">
            <div class="list-group">
              <a class="list-group-item">Model: <strong><?php echo $cams->model; ?></strong></a>
              <a class="list-group-item">Ip Intern: <strong><?php echo $cams->ip_int; ?></strong></a>
              <a class="list-group-item">Ip Extern: <strong><?php echo $cams->ip_ext; ?></strong></a>
              <a class="list-group-item">Port: <strong><?php echo $cams->port; ?></strong></a>
              <a class="list-group-item">User: <strong><?php echo $cams->user; ?></strong></a>
              <a class="list-group-item">Pass: <strong><?php echo $cams->pass; ?></strong></a>
            </div>
          </div>
        </div>
      </div>
    </div>          
  </ul>
<?php } ?>          

型号：
Ip实习生：
Ip外部设备：
端口：
用户：
通过：

首先，您需要在SQL语句中按标题对结果进行排序，这将把它们分组在一起，然后使用

if

语句确定当前记录是否与前一条记录具有相同的标题

<?php
$cam = $db->prepare('select * from camere');
$cam->execute();

$heading = "";

while ($cams = $cam->fetch(PDO::FETCH_OBJ)) {?>
  <ul class="list" style="list-style: none;">                                                                               
    <div class="panel panel-primary">

      <?php $cam_loc = $cams->locatie;

      if ($heading != $cam_loc) { ?>

      <div class="panel-heading">
        <li><h3 class="panel-title"><?php echo $cam_loc; ?></h3> </li>
      </div>

      <?php }
          //Update $heading ready for the next row.
          $heading = $cam_loc;
      } ?>

      <div class="panel-body">
        <div class="row">
          <div class="col-md-2" align="center">
            <div class="list-group">
              <a class="list-group-item">Model: <strong><?php echo $cams->model; ?></strong></a>
              <a class="list-group-item">Ip Intern: <strong><?php echo $cams->ip_int; ?></strong></a>
              <a class="list-group-item">Ip Extern: <strong><?php echo $cams->ip_ext; ?></strong></a>
              <a class="list-group-item">Port: <strong><?php echo $cams->port; ?></strong></a>
              <a class="list-group-item">User: <strong><?php echo $cams->user; ?></strong></a>
              <a class="list-group-item">Pass: <strong><?php echo $cams->pass; ?></strong></a>
            </div>
          </div>
        </div>
      </div>
    </div>          
  </ul>
<?php } ?>        

型号：
Ip实习生：
Ip外部设备：
端口：
用户：
通过：

---

您可能需要在这些新代码行中移动一些HTML标记，以获得所需的布局，但由于它位于上面，您不会为每条记录都获得一个新标题。

听起来像是应该从数据库中执行的操作，你能

按某个位置字段从相机订单中选择*吗？

？这不会有帮助，因为“locatie”在“camere”表中放置了2次，当我显示它时，它是相同的。可能我需要阅读一下关系数据库。虽然有一个js技巧可以克服这一点，但ideea很好，但最后3个分区仍然未关闭，每个面板进入最后一个分区。