我试图用很多数据创建一个表来显示,所以我希望有一个包含更多信息的隐藏div。
我几乎所有东西都设置好了,除了我遇到了一个循环问题(隐藏/显示只显示表上的第一项),所以我在SQL(第13行)上添加了一个auto_increment ID,以便我可以轻松地为桌子上的每个小组。
我的显示是
<?php
$con=mysqli_connect("localhost","root","pass","blist");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM suspects");
echo "<table class='style3' border='1'>
<tr class='header'>
<th><strong>Name</strong></th>
<th><strong>Picture</strong></th>
<th><strong>Age</strong></th>
<th><strong>Race</strong></th>
<th><strong>Skin Color</strong></th>
<th><strong>Height</strong></th>
<th><strong>Build</strong></th>
<th><strong>Eye Color</strong></th>
<th><strong>Hair Color</strong></th>
<th><strong>Description</strong></th>
<th><strong>Aliases</strong></th>";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='header'>";
echo "<td>".$row[0]." ".$row[1]." ";
echo "<div id='showhide'></div>";
echo "</td>";
echo "<td><img src='suspects/".$row[12]."' height=auto width=150 /></td>";
echo "<td>".$row[2]."</td>";
echo "<td>".$row[3]."</td>";
echo "<td>".$row[4]."</td>";
echo "<td>".$row[5]."</td>";
echo "<td>".$row[6]."</td>";
echo "<td>".$row[7]."</td>";
echo "<td>".$row[8]."</td>";
echo "<td>".$row[9]."</td>";
echo "<td>".$row[10]."</td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='11'>";
echo "<div id='hide_show'>";
echo $row[11];
echo "</div>";
echo "</td>";
echo "</tr>";
}
mysqli_close($con);
?>
hide / show
的jQuery脚本var button_beg = '<button class="button" onclick="showhide()">'
var button_end = '</button>';
var show_button = 'Show More', hide_button = 'Show Less';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
这就是我被困住的地方,我知道我必须修改jQuery,以便每个人都能显示出来#34;已分配$ row [13],但我认为它不会起作用,因为它不是PHP
PS:我是SQL / PHP的新手
答案 0 :(得分:1)
我会这样做: 只有一个纯粹的javascript函数接收DIV的id来切换:
function showHide(divId){
var myDiv =document.getElementById(divId);
if(myDiv){
myDiv.style.diplay = myDiv.style.diplay.toLowerCase() =='none'?'':'none';
}
}
然后在我的php脚本中:
echo "<button class='button' onclick='showHide(".$row['rowid'].")'>";
echo "<div class='myDivWhoContainsMoreData' id='".$row['rowid']."'>";
请根据你的情况调整这个想法。
答案 1 :(得分:0)
您为每一行输出相同的显示/隐藏ID:
echo "<div id='showhide'></div>";
echo "<div id='hide_show'>";
为这些DIV的ID添加ID,以便它们在DOM中是唯一的:
echo "<div id='showhide".$row['morowid']."'></div>";
echo "<div id='hide_show".$row['morowid']."'>";
然后相应地调整你的javascript。
答案 2 :(得分:0)
按照您的计划将showhide
div替换为实际的行ID,并使用showhide
作为其类。同时给一个包含数据的td
类,而不是按钮。并使周围tr
具有与div相同的ID:
<tr id='<?php echo $row[13]; ?>'>
<td><div class='showhide' id='<?php echo $row[13]; ?>'></div></td>
<td class=”data”>...</td>
...
</tr>
您正在使用jquery,让我们利用它的功能与dom节点选择器和事件:
<script type='text/javascript'>
function toggle_div(id){
$('tr#'+id).toggleClass('hidden');
var b = $('button#'+id);
switch (b.html()){
case "hide":
b.html("show");
break;
case "show":
b.html("hide");
break;
}
}
// build all the buttons and bind onclick events
(function(){
$('div.showhide').each(
function(i,e){
var id = $(e).attr('id');
e.innerHTML="<button id='"+id+"' onclick=toggle_div(\””+id+"\”)'>hide</button>";
}
):
})();
</script>
将以下内容添加到您的html或css:
<style>
tr.hidden > td.data {
display: none;
}
</style>
javascript只是在点击按钮的同一行中切换数据表格单元格的CSS类。该类具有display
属性none
,有效地隐藏了属于它的单元格。您可以根据自己的喜好调整该类CSS,而无需触及代码。