每个按钮的唯一值 - Unique Value For Each Button

我有两个php页面。第一页查询数据库并将一些数据放入表单中第二页，抓取从上一页提交的数据并显示数据。

问题：在第二页上，信息显示在表格中。在每行的末尾，都有一个"信息"按钮，允许用户单击并查看与该特定列中的数据相关的更多详细信息。出于某种原因，表中每条记录的信息按钮保存数据库查询中返回的第一条记录的值。换句话说，无论我在表中单击哪个按钮，它始终与查询中返回的第一条记录相关。

我希望有人能帮助我找到将每个"信息"按钮链接到每个唯一记录的解决方案。换句话说，如果我单击第一行中的信息按钮，它将显示与第 1 行等相关的记录的数据。这是我的代码。

第 1 页

<?php
$query = mysql_query ("SELECT  * from cust_data group by cabinet_number ORDER by cabinet_number ASC");
WHILE ($rows = @mysql_fetch_array($query)) {
    if (($rows['account_number']=="") &&
        ($rows['customer_first_name']=="") &&
        ($rows['customer_last_name']=="") &&
        ($rows['company_name']=="")) {
        echo '<form method="GET" action="cabinet_result_page.php">
                <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number">
                <input type="hidden" value="'.$rows['company_name'].'" name="company_name">
                <img src="images/bulletpoint_green.png">
                <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['cabinet_number'].'" id="submit">
              </form>';
    } else if ($rows['cabinet_number']!=="") {
        echo '<form method="GET" action="cabinet_result_page.php">
                      <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number">
                      <input type="hidden" value="'.$rows['company_name'].'" name="company_name">
                      <img src="images/bulletpoint_red.png">
                      <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['company_name'].'" id="submit">
              </form>';
    }
  }
}

第 2 页：获取第一页中的数据并将其放在表中。单击"信息"按钮时，更多信息将显示在JQUERY弹出窗口中

db_connect();
$cabinet_number = $_GET['cabinet_number'];
$company_name = $_GET['company_name'];
$query = @mysql_query ("SELECT * FROM cust_data WHERE cabinet_number = '$cabinet_number' ");
WHILE ($rows = @mysql_fetch_array($query)) {
    echo'<tr>
            <td><font size="4">'; echo $rows['account_number']; echo'</font></td>
            <td><font size="4">'; echo $rows['customer_first_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['customer_last_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['company_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['cabinet_number']; echo'</font></td>
            <td><font size="4">'; echo $rows['key_tag_number']; echo'</font></td>';
    if ($rows['switch_and_port1'] =="") {
        echo '';
    } else if ($rows['switch_and_port1'] !== "") {
        echo '<td><font size="4">';
        echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>';
    }
    {
        echo '<td><font size="4">'; echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>';
    }
    echo '</tr>';
    echo '<div  class="well" style="display:none;margin:1em;" class="my_modal">';
    echo '<img src="images/hdc_logo_transparent.png"><br>';
    echo '<div style="height:23px; width:100%; background-color:black"> <h4><font color="#FFFFFF">','&nbsp; ', 'Cabinet: ', $id, '</font></h4></div>';
    echo '<p>';
    echo '<br>';
    echo '<img src="images/bulletpoint_orange.png">';
    echo 'Power: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['power_circuit'];
    echo '<br>';
    echo'<img src="images/bulletpoint_orange.png">';
    echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port1'];
    if ($rows['switch_and_port2'] =="") {
        echo '';
    } else if ($rows['switch_and_port2'] !== "") {
        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port2'];
    }
    if ($rows['switch_and_port3'] =="") {
        echo '';
    } else if ($rows['switch_and_port3'] !== "") {
        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port3'];
    }
    if ($rows['switch_and_port4'] =="") {
        echo '';
    } else if ($rows['switch_and_port4'] !== "") {
        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port4'];
    }
    echo '</p>';
    echo'</div></form>';
}
echo'<script>
                $(document).ready(function() {
                $(".my_modal_open").click(function(){
                $(this).closest("tr").next(".my_modal").popup({"autoopen": true});
                });
                });
                });
                </script>
                </body>
                </html>';
}

问题是您为所有模态设置了相同的 id 属性（这是无效的 HTML 标记），并期望按钮上的单击处理程序确定要打开哪个模态。

乌帕特

标记的另一个问题是您不能将 <div> s 作为表行的同级，它会产生意想不到的结果，因为浏览器会尝试修复标记并重新排列元素，您可以将div 放在 td 中或使用第二个循环来构建它们。

现在我也在你的弹出插件中做了一些挖掘，我必须说它没有很好地实现，我建议你寻找另一个。话虽如此，我确实设法让它工作，这是你需要做的：

为每个模态div 设置一个唯一的 id，如果你的数据库数据中有某种 id，你可以使用它，如果没有，那么你可以在循环中设置一个计数器变量：
```
echo '<div class="well" id="my_modal'.$rows['id'].'">';
```

对应打开模式的按钮使用与类相同的 id，但添加"_open"作为后缀：

echo '<input type = "image" src="images/view_details.png" height="16" width="16" class="my_modal'.rows['id'].'_open">

您现在可以在divs 上初始化弹出插件，它会自动将打开操作分配给相应的按钮：

echo'<script>
     $(document).ready(function () {
         $("[id^=''my_modal'']").each(function () {
             $(this).popup();
         });
     });
     </script>';

这应该可以解决模态问题，这是一个工作演示。

现在我也对你的代码有一些观察：

您应该避免使用内联样式，正如我之前提到的，应该将<font>标签替换为正确的 CSS，我还建议使用 CSS 填充/边距在单词之间添加空格而不是

这种类型的代码：

if ($rows['switch_and_port1'] =="") {
    echo '';
} else if ($rows['switch_and_port1'] !== "") {
    echo 'SOME CONTENT';
}

可以优化为：

if ($rows['switch_and_port1'] !== "") {
    echo 'SOME CONTENT';
}

回显空字符串不会产生任何输出，并且不需要 elseif