Question

我有两个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 POPUP”中

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>';
}

Answer 1

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

<强> UPADTE

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

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

为每个模态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">

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

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

这应该解决模态问题，这里是 working demo 。

现在我对你的代码也有一些看法：

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

此类代码：

&nbsp;&nbsp;&nbsp;&nbsp;

可以优化为：

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

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

每个按钮的独特价值

1 个答案: