Question

我试图用很多数据创建一个表来显示，所以我希望有一个包含更多信息的隐藏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的新手

Answer 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']."'>";

请根据你的情况调整这个想法。

Answer 2

您为每一行输出相同的显示/隐藏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。

Answer 3

表格数据

按照您的计划将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，而无需触及代码。

使用/唯一SQL ID值显示/隐藏DIV

3 个答案:

表格数据

javascript代码

CSS