展開/摺疊HTML表格

我有一個從服務器動態生成的HTML表格。展開/摺疊HTML表格

我想在這個html表中展開/摺疊，當我點擊擴展時，我應該得到一個新的列和行，並在崩潰時，它應該像以前一樣。

我不想使用任何第三方插件。我想使用jQuery和Ajax。

你能幫我或提供任何信息哦我該怎麼做？

來源

2011-04-06 Anish Sharma

新列和行的內容來自哪裏？你有什麼結構？你已經試過了什麼？什麼沒有用？ – 2011-04-06 14:52:14

他想要一個教程或類似的東西開始......他沒有問題，但他不知道該怎麼做。 – 2011-04-06 14:54:03

新行和新列的內容也來自服務器從一個數據表，我想知道我如何開始它的邏輯。 – 2011-04-06 14:55:08

好的我認爲這個問題太模糊了，如果你想一想，就會被完全回答。

新列和行的內容來自哪裏？你有什麼結構？你已經試過了什麼？什麼沒有用？ ^{David Thomas評論。}

如果你不想使用jQuery插件像this one這意味着你必須做你自己和）在這裏，沒有人會完全爲你做二）沒有任何信息要少得多，這將只是猜測。

這就是說這裏是你的方法應該是什麼樣的一個快速和骯髒的例子。

HTML

<table border="1"> 
    <tr class="clickable"> 
     <td colspan="2">Click to toggle Next</td>    
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test 2</td> 
    </tr> 
    <tr class="clickable"> 
     <td colspan="2">Click to toggle Next</td>    
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test 2</td> 
    </tr> 
    <tr class="clickable"> 
     <td colspan="2">Click to toggle Next</td>    
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test 2</td> 
    </tr> 
</table>

jQuery的

$(".clickable").click(function() { 

    $(this).next().toggle(); 

});

正如我說這是只是一個例子，它的不可擴展（甚至不支持躲在兩行），你可以看到一個demo here。

如果您更新您的問題，我可以更好地更新個性化答案來更新答案。

但是，如果你想建立它自己，這是一些本可以派上用場：

.show()
.hide()
.toggle()
.animate()
:nth-child
.children()

等衆多取決於你的方法。

祝你好運！

來源

2011-04-06 16:04:42 Trufa

正是我在找的東西。謝謝！ – taji01 2017-05-18 18:08:33

下面是一個簡單的例子，我希望這有助於正確理解您的問題。

通過這樣的結構：

<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr /> 
<table id="mytable"> 
    <thead> 
     <tr> 
      <td> 
       HEAD 
      </td> 
      <td> 
       HEAD 
      </td> 
      <td> 
       HEAD 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       Demo 
      </td> 
      <td> 
       Demo 
      </td> 
      <td> 
       Demo 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Demo 
      </td> 
      <td> 
       Demo 
      </td> 
      <td> 
       Demo 
      </td> 
     </tr> 
    </tbody> 
</table>

也許你可以做這樣的事情：

$(document).ready(function() { 
     $(".expand").click(function() { 
      $("#mytable tbody").show("slow"); 
     }); 
     $(".collapse").click(function() { 
      $("#mytable tbody").hide("fast"); 
     }); 
    });

來源

2011-04-06 16:31:31 Ernesto

@Trufa代碼是正確的，它是你實際需要的東西。礦藏隱藏了整個桌子。 – Ernesto 2011-04-06 16:34:30

+1，這裏是工作示例btw http://jsfiddle.net/Trufa/b3pTg/1/ – Trufa 2011-04-06 23:38:03

OMG @Trufa，不知道jsfiddle，太好了。謝謝。 – Ernesto 2011-04-07 13:13:02

An accordion是一個簡單的，優雅的解決方案：JavaScript和CSS。

This fiddle從上面的W3Schools解釋。

來源

2017-01-06 11:06:33

展開/摺疊HTML表格

回答

相關問題