CODEWITHSUNDEEP
phpjqueryhtmlmysqlcss
Nikos Bounas
Nikos Bounas

Reputation: 11

How can I hide a table with css and jquery, which has values a database?

I have problem. I have one database in which I want to take her values and show them on a html table. I have already created the database and her tables and with jQuery I hide and show it with one button from a dropdown list. The problem is that i want to show this table when I click the button and all the other time I want it to be hidden. For this reason I have the display:none; on css. But when I do this, I can see only the first row of the database. And I delete display:none; I can see all the rows but this is shown for ever on my page. Where am I wrong?

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;
}

Upvotes: 0

Views: 35

Answers (1)

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

Try looping over rows instead of tables -- don't close the table tag after your head, only close it after the whole table is out.

You are currently repeating id (table5) which should be unique! jQuery (correctly) expects that each id will only occur once in the page, and as such only returns the first element when an id selector is used ( 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>

Since you want to loop this way, I've changed the while loop to use angled the php-as-a-template style ( : and endwhile ).

Upvotes: 1

Related Questions