與html摺疊表

Question

我有一張表，我想要顯示特定服務器的存儲使用，可用和總計。但是，這些服務器有多個驅動器，我希望默認視圖顯示所有使用的存儲的總計，所有這些都可用，全部用於總計。但點擊該行會將其刪除以查看故障。我將輸入到每個單元格的所有數據，但我不知道如何執行下拉（摺疊和展開）。

例如。崩潰視圖

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

例如，展開視圖

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

Answer 1

使用jQuery因此新的jsfiddle利用手風琴的（更新）：http://jsfiddle.net/5BRsy/3/

首先設置class和id小號所以你可以給他們打電話JS注意我必須每TD這樣做，因爲它不會讓我使用div或span並隱藏它們。

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

然後用JS

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

而且CSS隱藏他們的onload否則他們可以看到隱藏TD小號

.expand1 { display: none; 
} 

.expand2 { display: none; 
} 

欲瞭解更多信息請訪問http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 2

JavaScript函數對此很好。只需爲每個服務器具有驅動器1/2和ID的行添加類，然後在單擊行時可以執行.show和.hide。

Answer 3

有幾個選項。你可以使用這個小的jQuery插件：http://sylvain-hamel.github.io/simple-expand/

或者你可以從jQuery的http://jqueryui.com/accordion/