最大化/最小化HTML表 <th> 使用jQuery

Question

所以我有一個帶有多個表頭的巨大表。 我希望能夠使用JQuery（或任何可行的方法）最大化或最小化這些標頭。 這是一個示例表：

 <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> 

基本上在此示例中，我希望兩個相互獨立的最小化/最大化按鈕（如果我按下一個，則另一個不變）。

Answer 1

您可以為表格提供一個ID，如下所示

<table id="tb1">

然后您可以使用jQuery在單擊按鈕時隱藏表格

$("button#minimize").click(function(){
   $("div#tb1").hide();
})

同樣，您可以在最大化按鈕單擊時顯示表格。 按鈕的ID應該maximize和minimize 。

Answer 2

你有嘗試過嗎？

http://www.w3schools.com/jquery/jquery_hide_show.asp

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

基本上，以上這個腳本的目標是id="hide"

因此，當您單擊id元素“ hide”時，它將啟動Jquery函數並隱藏<p>元素。

然后以相同的方式定位id="show"

只需閱讀一下，它就很容易理解。