有人可以帮我解决这个问题吗?我有一些从我的MySQL数据库生成的数据,其中唯一的id使用了while循环。
while ($row = mysql_fetch_array($query)){
echo'<tr>
<td><img src="expand.png" id="$row['id']"></td>
<td>'.$row['name'].'
<div id="'.$row['id'].'_Expanded">
//some data regarding the selected id need to be displayed here
</div>
</td>
</tr>';
}
我希望div在页面加载时隐藏,但是当我单击图像时,只有与id相关的单个div应该在JQuery中扩展。
有人可以帮我检索要在JQuery中使用的各个ID吗?谢谢!
答案 0 :(得分:0)
看看这个例子:(我通过foreach一个数组硬编码你的mysql fetch循环)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style type="text/css">
.expandable{
display: none;
}
</style>
<script type="text/javascript">
$(function(){ // onload
$('.expandableContainer img').click(function(){
$('#'+this.id+'_Expanded').toggle();
});
});
</script>
</head>
<body>
<table>
<?php
$data = [
['id' => 1, 'name' => 1],
['id' => 2, 'name' => 2],
['id' => 3, 'name' => 3],
['id' => 4, 'name' => 4],
];
foreach ($data as $row){?>
<tr class="expandableContainer">
<td><img src="expand.png" id="<?php echo $row['id']; ?>"></td>
<td><?php echo $row['name']; ?>
<div id="<?php echo $row['id']; ?>_Expanded">
//some data regarding the selected id need to be displayed here
</div>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>