我试图创建一个表w/大量的数据显示,所以我想有一个隐藏的div持有更多的信息。
我几乎已经设置了所有内容,除了我遇到了一个循环问题(隐藏/显示只显示表上的第一个项目),所以我在SQL(第13行)上添加了auto_increment ID,以便我可以轻松地为表上的每个组分配唯一的ID。
My display is this
<?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);
?>
隐藏/显示的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,以便每个"showhide"都分配$row[13],但我认为它不会工作,因为它不是PHP
我是SQL/PHP的新手我会这样做:只有一个纯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']."'>";
请根据你的情况调整这个想法。
您正在为每一行输出相同的show/hide 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']."'>";
表格数据
将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>
javascript代码你正在使用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>
CSS 在你的html或css中添加以下内容:
<style>
tr.hidden > td.data {
display: none;
}
</style>
javascript只是从被点击按钮的同一行切换数据表单元格的CSS类。该类具有display
属性none
,有效地隐藏了属于它的单元格。您可以根据自己的喜好调整类CSS,而无需修改代码。