Question

我尝试使用jQuery Mobile Collapsibles创建一个包含可折叠内容的网页。我指的是this。我希望将$ row [＆＃39; Host＆＃39;]显示为标题，将$ row [＆＃39; IP＆＃39;]显示为内容。我的脚本没有显示任何内容？我哪里错了？

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>


<?php
$con = mysql_connect("127.0.0.1", "root", "pass");
if (!$con) {
    die("Error: " . mysql_error());
}


mysql_select_db("mydb", $con);
$result = mysql_query("SELECT * FROM mytbl");
?>

<?php 
// display the results returned
while ($row = mysql_fetch_array($result)) {
?>
<div data-role="collapsible" data-collapsed="true">
   <h3><?=$row['Host']?></h3>
   <p><?=$row['IP']?><p>
</div>
<?php } ?>

Answer 1

您的HTML中有错误。

基本上，您在HTML标记关闭后导出数据库数据：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    <body>
    </body>
</html>

YOUR PHP CODE IS HERE

将其更改为：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    <body>

        <?php
        $con = mysql_connect("127.0.0.1", "root", "pass");
        if (!$con) {
            die("Error: " . mysql_error());
        }


        mysql_select_db("mydb", $con);
        $result = mysql_query("SELECT * FROM mytbl");
        ?>

        <?php 
        // display the results returned
        while ($row = mysql_fetch_array($result)) {
        ?>
        <div data-role="collapsible" data-collapsed="true">
           <h3><?=$row['Host']?></h3>
           <p><?=$row['IP']?><p>
        </div>
        <?php } ?>

    </body>
</html>

jQuery Mobile可折叠数据库

1 个答案: