如何隐藏具有数据库值的 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 (table5)，这应该是唯一的！ 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 样式（: 和 endwhile）。