我创建了一个Php页面,该页面从MySQL数据库检索数据。我将四个记录插入数据库。数据在index.php页面上显示正常,但我想显示记录,如此处所附图像所示。我希望所有记录都已关闭,并且在单击名称时它将打开。其他的保持关闭,而其他的保持打开时,先前的关闭。现在,当我单击任何名称在浏览器中运行时,仅显示第一条记录。(或使用php,MySQL等执行此操作的任何其他方法)有帮助吗?
index.php:
<?php
ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'test');
$connection = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
$select=mysql_query("SELECT * FROM sample order by id desc");
$i=1;
while($userrow=mysql_fetch_array($select))
{
$id=$userrow['id'];
$username=$userrow['username'];
$usercity=$userrow['usercity'];
$useraddress=$userrow['useraddress'];
$usermail=$userrow['emailid'];
$usermobile=$userrow['mobileno'];
$created=$userrow['created']
?>
<div class="display" style="width:500px">
<!-------------------- User Name : --------------------------------->
<p id="User-Name" style="color:#999" onclick="showDiv();"> Name- <span style="color: #999"><?php echo $username; ?></span>
<span class="delete" title="Delete"> X </span></a>
</p>
<br />
<!--------------------- User City : ----------------------------------->
<p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999"><?php echo $usercity; ?></span></p>
<br />
<div id="Entries" >
<!---------------------- User address : -------------------------------->
<p style="color:#999">Address- <span style="color:#999"><?php echo $useraddress; ?></span>
</p>
<br />
<!------------------ User Email Id : -------------------------------->
<p style="color:#999">Email- <span style="color:#999"><?php echo $usermail; ?></span>
<a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
</p>
<!--------------------- User Mobile : --------------------------------->
<br />
<p style="color:#999">Mobile- <span style="color:#999"><?php echo $usermobile; ?></span>
</p>
<!-------------------- User Created : ------------------------------->
<br />
<p style="color:#999"> <span style="color:#999"><?php echo $created; ?></span>
</p>
<br />
</div>
</div>
<?php } ?>
<script>
function showDiv()
{
document.getElementById('Entries').style.display = "block";
}
</script>
<style>
#Entries
{
display:none;
}
</style>
在文档ID中,ID是唯一的,这意味着只能提供一个ID,因此将您更改<div id="Entries" >
为<div class="Entries" >
(同时循环打印相同的div标签多次)。
现在从改变你的onclick事件<p>
,以<div>
这样的:<p style="color:#999" onclick="showDiv();">
改变<div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">
(那么只有你可以选择“div.Entries”,这是内部div.display,不是里面<p>
)
现在,在你的代码的底部,从改变你的CSS样式标签#Entries
到.Entries
(因为我们在div中进行了更改)
只需将以下代码添加到您的页面中
<script>
function showDiv(obj)
{
$('.Entries').css('display','none');
var div = $(obj).find('.Entries').css('display','block');
}
</script>
完整的代码如下:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
</head>
<body>
<?php
$database = array(
'one' => array('name' => 'john' , 'city' => 'noida' , 'addr' => 'xyz','mail' => '[email protected]'),
'two' => array('name' => 'jimi' , 'city' => 'india' , 'addr' => 'abc','mail' => '[email protected]'),
'three' => array('name' => 'foo' , 'city' => 'china' , 'addr' => 'pqr','mail' => '[email protected]'),
'four' => array('name' => 'apple' , 'city' => 'america' , 'addr' => 'lmno','mail' => '[email protected]'),
);
foreach ($database as $row) {
$username = $row['name'];
$usercity = $row['city'];
$useraddress = $row['addr'];
$usermail = $row['mail'];
echo '<div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">
<!-------------------- User Name : --------------------------------->
<p style="color:#999"> Name- <span style="color: #999">'.$username.' ?></span>
<span class="delete" title="Delete"> X </span></a>
</p>
<br />
<!--------------------- User City : ----------------------------------->
<p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999">'.$usercity.'</span></p>
<br />
<div class="Entries" >
<!---------------------- User address : -------------------------------->
<p style="color:#999">Address- <span style="color:#999">'.$useraddress.'</span>
</p>
<br />
<!------------------ User Email Id : -------------------------------->
<p style="color:#999">Email- <span style="color:#999">'.$usermail.'</span>
<a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
</p>
<br />
</div>
</div>';
}
?>
</body>
<script>
function showDiv(obj)
{
$('.Entries').css('display','none');
var div = $(obj).find('.Entries').css('display','block');
}
</script>
<style>
.Entries
{
display:none;
}
</style>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句