我正在尝试使用jQuery Mobile Collapsibles创建具有可折叠内容的网页。我指的是this。我想将$ row ['Host']显示为标题，将$ row ['IP']显示为内容。我的脚本没有显示任何内容？我哪里错了？
<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 } ?>
最佳答案
您的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>