How to show a table on click of a button in php?

Question

I want to list files from mysql table to a webpage in php. For this i use tables so that i have more regular view. Now there are n numbers of tables on a page. This n is depending upon a mysql query. I am able to list the files on the page. But if numbers of rows in table get increased and value of n is also get increased then my page length will be very long. So i want to give a tree view to each table. Like there will be a button over each table with value '+'. when i click on it the value get change to '-' and that table should be visible. Here what i tried

<script type="text/javascript">
$(document).ready(function(){
  $(".show").html("<input type='checkbox'>");
  $('.tree td').hide();
  $('th ').click( function() {
    $(this).parents('table').find('td').toggle(); 
  });
});

 <table width="100%" class="tree">
 <tr width="20px"><th colspan="2" class="show"> </th></tr>                          
 <tr>
   <td width="50%"><b>Name</b></td>
   <td width="50%"><b>Last Updated</b></td>
 </tr>

  while($row = $result_sql->fetch_assoc()) 
  {
         <tr>
         <td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td>
         <td width='50%'>{$row['created']}</td>                             
         </tr>
  }
  </table>

This is not exact code.

as you can see i am able to do it but i am using a chackbox. i want to have a button with value + or - . There is one problem with this code. The line in which checkbox is showing if i click on it the table is expanded means it taking the entire row not only the checkbox. So anybody can help me with this?

Thanks

Answer 1

I know that this is a code sample, in the future try to provide a jsFiddle to make it easier for people to help. If you want to use +/- , you can make a minor modification like my example

<th colspan="2" width="100%"><span class="show"></span></th>

I basically added the show class to a span within the <th> and attached a click handler on it as well. When you click on it, it will toggle the <td> within the parent <table> ... in addition, it will check the text-value in the <th> and inverse it

$('.show').click(function () {
    $(this).parents('table').find('td').toggle();
    $(this).text() == '+' ? $(this).text('-') : $(this).text('+');
});

Since you don't need a checkbox and you are using a <span> , it won't wrap across the entire <th> . Was this what you were looking for?

Answer 2

Get solution

<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='button' value='+' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parents('table').find('th').parents('table').find('td').toggle(); 
if (this.value=="+") this.value = "-";
else this.value = "+";

});
});

It is working fine the way i wanted.