Collapsing table with html

问题

I have a table that I want to show used, available, and total for storage for specific servers. However, the servers have multiple drives and I want the default view to show totals for all storage for used, all for available, and all for total. But clicking the row drops it down to view the breakdown. I'll have all the data inputted into each cell, but I'm not sure how to do the drop down (collapse and expand).

eg. collapse view

<table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

eg. expanded view

  <table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

回答1:

Use JQuery so your new Jsfiddle(updated) : http://jsfiddle.net/5BRsy/3/

First set class and ids so you can call them with JS Note I had to do it for every TD because it wouldn't let me use div or span and hide them.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table2">
 <th></th><th>server 1</th><th>server 2</th>
 <tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
 <tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>

 <tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

then use JS

    $(document).ready(function(){
  $(".btn").click(function(){
    $(".expand1").toggle();
  });
      $(".btn2").click(function(){
    $(".expand2").toggle();
  });
})

And CSS to hide them onload else they could see the hidden TDs

.expand1 { display: none;
}

.expand2 { display: none;
}

For more info visit http://www.w3schools.com/jquery/jquery_hide_show.asp

回答2:

A javascript function would be great for this. Just add classes to the rows that have drive 1/2 and ID's for each server and then you could do a .show and .hide if rows are clicked.

回答3:

There are a few options. You can use this small jQuery plug-in: http://sylvain-hamel.github.io/simple-expand/

Or you can make use of Accordion from jQuery http://jqueryui.com/accordion/

来源：https://stackoverflow.com/questions/23812997/collapsing-table-with-html

标签

html

css

collapse

expand