如何用php / pdo / css创建多个根据不同数据库数据变化的动态div

Question

我是编程新手，所以这可能是一些基本/显而易见的东西，但我正在尝试使用小 div 矩形设计一个基本的网格样式页面，以在新行中显示每个员工，然后显示分配给该员工的任何工作成员将与显示其姓名的第一个 div 内联显示。

• 我有一个员工数据库和一个职位数据库
• jobs 数据库有一个 assigned_to 列，如果一个工作被分配给某人，他们的名字或 id 将在这里

我在这里尝试实现的逻辑：

• 如果员工数据库中有员工，则为他们创建一个 div（或“主页上的一行”）-WORKING
• 然后，如果他们的名字出现在任何特定工作的“assigned_to”中，那么还要在第一个 div 旁边显示该特定工作。 - 只为第一个工作人员工作
• 继续，直到“assigned_to”列中不再有工作人员姓名为止

问题是我只能让它向第一个工作人员显示分配的工作，就像我用来显示工作的循环在第一个工作人员之后停止并且不会继续寻找其他工作也分配给其他工作人员。

它会愉快地显示已分配给第一个工作人员的 5 个不同的工作，但之后它不会继续检查是否已分配给其他工作人员。

它会很高兴地显示我为每个不是从数据库数据动态生成的员工手动编写的“测试工作”。

我发现了2个类似的问题 如何使用php根据mysql表中的数据自动创建div？ 使用 sql 表中的数据自动创建 div 但它们并没有真正涵盖仅根据数据库中的名称匹配来显示某些 div。

到目前为止，这是我的代码，几乎可以正常工作

• 我只是复制并粘贴了数据库选择查询（因为它适用于工作人员）并给它一个不同的变量（这是正确的做法吗？或者有没有办法在一个查询中从 2 个数据库中选择我需要的内容？）

    $sql = 'SELECT staff_id, name, role
            FROM tbl_staff
            ORDER BY staff_id';
    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);
    
    $sql2 = 'SELECT job_addy, job_type, assigned_to
            FROM tbl_jobs';
    $q2 = $pdo->query($sql2);
    $q2->setFetchMode(PDO::FETCH_ASSOC);

• 然后我有一个主要的 while 循环，它为每个工作人员创建一个矩形和一行似乎工作得很好。
• 在创建第一个员工 div 之后，我尝试使用相同的 while 循环来获取工作数据并将另一个 div 放在那个旁边（只有当它分配给他们时）。
• 说“测试工作”的第三个 div 只是我为测试布局添加的一个，它出现在每个员工身上，似乎证明布局有效，这让我相信我的问题出在第二个 while 循环和if 后面的语句。

        <div class ="main">
            <?php while ($row = $q->fetch()): ?>
                <div class ="staffsq">
                    <span><strong><?php echo htmlspecialchars($row['name']); ?></strong></br>
                    (<?php echo htmlspecialchars($row['role']); ?>)</span>
                </div>
                
                <?php while ($row2 = $q2->fetch()): ?>
                    <?php if ($row['name'] == $row2['assigned_to']): ?>
                        <div class ="jobsq">
                            <span><strong><?php echo htmlspecialchars($row2['job_addy']); ?></strong></br>
                            <?php echo htmlspecialchars($row2['job_type']); ?></span>
                        </div>
                    <?php endif; ?>
                <?php endwhile; ?>
                
                <div class ="jobsq">
                    <span><strong>Test Job</strong></br>
                    <?php echo htmlspecialchars($row['name']); ?></span>
                </div>
                </br>
            <?php endwhile; ?>
        </div>

css 只是给出矩形的大小并帮助将它们定位为内联。

一切都很基本，我只想让分配工作的主要功能起作用。

.main {
    background-color: #c7c7c7;
    box-sizing: border-box;
    padding: 5px;
    white-space: nowrap;
    overflow: auto;
}


.staffsq {
    position: absolute;
    display: inline-block;
    background-color: #99ccff; 
    height: 92.7px;
    width: 150px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    z-index: 10;
}

.jobsq {
    position: relative;
    left: 155px;
    display: inline-block;
    background-color: #ffff99; 
    height: 92.7px;
    width: 150px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    z-index: 9;
}