php - 如何使用 css 和 jquery 隐藏具有数据库值的表？

Question

我有问题。我有一个数据库，我想在其中获取她的值并将它们显示在 html 表上。我已经创建了数据库和她的表，并使用 jQuery 我用下拉列表中的一个按钮隐藏和显示它。问题是我想在单击按钮时显示此表，而在其他所有时间我都希望它被隐藏。出于这个原因，我有 display:none;在 CSS 上。但是当我这样做时，我只能看到数据库的第一行。我删除了 display:none;我可以看到所有行，但这会永远显示在我的页面上。我哪里错了？

jquery

<script>
$(document).ready(function(){
$('#p4').click(function(){ //p4 id για το κουμπί της dropdown λίστας
$('#table4').show();
$('#table5').show();
  });
 });
</script>

php

<table name="table4" id="table4" width="941" border="1" cellspacing="0" cellpadding="3" align="center">
<tr>
<td width="8%"><b>No.</b></td>
<td width="8%"><b>Όνομα</b></td>
<td width="11%"><b>Επώνυμο</b></td>
<td width="11%"><b>Πατρώνυμο</b></td>
<td width="9%"><b>Διεύθυνση Κατοικίας</b></td>
<td width="6%"><b>Πόλη</b></td>
<td width="7%"><b>ΤΚ</b></td>
<td width="7%"><b>ΑΜΚΑ</b></td>
<td width="7%"><b>Τηλέφωνο</b></td>
<td width="7%"><b>E-mail</b></td>
</tr>
</table>
<?php
// Run the actual connection here  
$link=mysqli_connect("$dbhost","$dbusername","$dbpass") or die ("could not connect to mysql");
mysqli_select_db($link,"$dbname") or die ("no database");        
$result = mysqli_query($link, "SELECT * FROM lista_asthenwn");
$astheneis = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result)){
?>
<table name="table5" id="table5" class="table5" width="941" border="1" cellspacing="0" cellpadding="3" align="center">
<tr>
<td width="13%"><?php echo $row['id']?></td>
<td width="13%"><?php echo $row['Onoma']?></td>
<td width="9%"><?php echo $row['Epwnumo']?></td>
<td width="6%"><?php echo $row['Patrwnumo']?></td>
<td width="21%"><?php echo $row['Dieuthunsh']?></td>
<td width="10%"><?php echo $row['Poli']?></td>
<td width="9%"><?php echo $row['TK']?></td>
<td width="10%"><?php echo $row['AMKA']?></td>
<td width="8%"><?php echo $row['Til']?></td>
<td width="3%"><?php echo $row['Email']?></td>
</tr>
</table>
<?php
// close while loop
}
// close connection
mysqli_close($link);
?>

CSS

#table4 {
margin-top: 150px;
display:none;
}
#table5 {
display:none;
}

Answer 1

尝试循环遍历行而不是表格——不要在你的头脑之后关闭 table 标签，只有在整个表格结束后才关闭它。

您当前正在重复 id(表 5)，它应该是唯一的! jQuery(正确地)期望每个 id 在页面中只出现一次，因此当使用 id 选择器时只返回第一个元素( https://api.jquery.com/id-selector/ )。

<table name="table4" id="table4" width="941" border="1" cellspacing="0" cellpadding="3" align="center">
  <tr>
    <td width="8%"><b>No.</b></td>
    <td width="8%"><b>Όνομα</b></td>
    <td width="11%"><b>Επώνυμο</b></td>
    <td width="11%"><b>Πατρώνυμο</b></td>
    <td width="9%"><b>Διεύθυνση Κατοικίας</b></td>
    <td width="6%"><b>Πόλη</b></td>
    <td width="7%"><b>ΤΚ</b></td>
    <td width="7%"><b>ΑΜΚΑ</b></td>
    <td width="7%"><b>Τηλέφωνο</b></td>
    <td width="7%"><b>E-mail</b></td>
  </tr>

  <?php
    // Run the actual connection here  
    $link=mysqli_connect("$dbhost","$dbusername","$dbpass") or die ("could not connect to mysql");
    mysqli_select_db($link,"$dbname") or die ("no database");        
    $result = mysqli_query($link, "SELECT * FROM lista_asthenwn");
    $astheneis = mysqli_num_rows($result);
    while($row = mysqli_fetch_array($result)):
  ?>
  <tr>
    <td width="13%"><?php echo $row['id']?></td>
    <td width="13%"><?php echo $row['Onoma']?></td>
    <td width="9%"><?php echo $row['Epwnumo']?></td>
    <td width="6%"><?php echo $row['Patrwnumo']?></td>
    <td width="21%"><?php echo $row['Dieuthunsh']?></td>
    <td width="10%"><?php echo $row['Poli']?></td>
    <td width="9%"><?php echo $row['TK']?></td>
    <td width="10%"><?php echo $row['AMKA']?></td>
    <td width="8%"><?php echo $row['Til']?></td>
    <td width="3%"><?php echo $row['Email']?></td>
  </tr>
  <?php
    // close while loop
    endwhile;

    // close connection
    mysqli_close($link);
  ?>
</table>

既然你想以这种方式循环，我已经改变了 while 循环以使用倾斜的 php-as-a-template 样式( : 和 结束时)。