Expandable table view in HTML

Question

I am building a dynamic table that fetches and displays data from database, the structure of table looks like this

<table class="table" id="report">
  <thead>
    <tr>
      <th>Title</th>
      <th>Skill</th>
      <th>Area</th>
    </tr>
  </thead>

  <tbody>
    <?
      $sql="SELECT * from tablename ";
      $result= mysqli_query($con, $sql);
      if(mysqli_num_rows($result)>0) {
        while($row = mysqli_fetch_assoc($result)) {
          <tr>
            <td><? echo $title; ?></td>
            <td><? echo $skill; ?></td>
            <td><? echo $area; ?></td>
          </tr>
        }
      }
  </tbody>
</table>

I wish that when a user clicks on title a view should expand and then on another click it should collapse.

I built a static table in jsfiddle and it was working fine, but when I tried to merge the code with my above table it is not working. Can anyone please tell where I went wrong?

BTW your original code can be simplified: http://jsfiddle.net/DelightedDoD/pyq67q33/1/ — Wesley Smith, Nov 21 '15 at 05:58
Also, it is worth noting that the [Datatables plugin](https://www.datatables.net/examples/api/row_details.html) has this functionality out of the box and does it quite well, if your able/willing to use a plugin — Wesley Smith, Nov 21 '15 at 06:01

Mi-Creativity · Answer 1 · 2015-11-21T06:38:37.577

0

Try this JS Fiddle and hopefully it'll work, I added the dummy text inside that td and on click on the td that toggles the visibility of child div .hidden

$(document).ready(function () {
    $('.expandable').on('click', function(){
     $(this).children('.hidden').toggle();
    });
});

.hidden {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="report" border="1" style="width:100%" >
    <tr>
        <th> First </th>
        <th> Second </th>
        <th> Third </th>
    </tr>

    <tr>
         <td class="expandable">1st title
            <div class="hidden">dummy text 1
                <br>dummy text 1
                <br>dummy text 1
                <br>
            </div>
        </td>
         <td>1</td>
         <td>1</td>
    </tr> 
    <tr>
         <td class="expandable">2st title
            <div class="hidden">dummy text 2
                <br>dummy text 2
                <br>dummy text 2
                <br>
            </div>
        </td>
         <td>2</td>
         <td>2</td>
    </tr>
</table>

edited Nov 21 '15 at 06:38

answered Nov 21 '15 at 06:11

Mi-Creativity

9,554
10
38
47

i tried your code, but its not working with my code, perhaps because of the difference in table structure. can u please try once with the table structure that i am using – Nov 21 '15 at 06:21
certainly you need to re-structure the table, Umm you mean you have to consider havngthe hidden dummy text in its own row? – Mi-Creativity Nov 21 '15 at 06:22
the hidden text seem to be fine, but if u notice i have used thead and tbody tag specifically, this is d only differenc dat i was able to c, rest i have done d same acc to ur code, – Nov 21 '15 at 06:24
@samuel, I've update the answer and the fiddle http://jsfiddle.net/Mi_Creativity/p4oo0nr3/1/ – Mi-Creativity Nov 21 '15 at 06:39

Expandable table view in HTML

1 Answers1