php - 显示/隐藏具有唯一 SQL ID 值的 DIV

Question

我正在尝试创建一个包含大量要显示的数据的表格，因此我想要一个隐藏的 div 来保存更多信息。

我几乎已经设置好了所有内容，除了遇到循环问题(隐藏/显示仅显示表上的第一项)，因此我在 SQL 上添加了一个 auto_increment ID(第 13 行)，以便我可以轻松地将唯一 ID 分配给 table 上的每个组。

我的显示器是这样的

<?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

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

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