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

Question

So I have a huge table with multiple table headers. I want to be able to maximize or minimize these headers using JQuery (or whatever works). Here is an example table:

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

Basically in this example, I would like two minimize/maximize buttons that interact apart from each other (if I hit one, the other is unchanged).

Answer 1

You can give an id to the table like below

<table id="tb1">

Then you can use jQuery to hide the table on button click

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

Similarly you can show the table on maximize button click. Buttons should have the id maximize and minimize .

Answer 2

Have you tried this?

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

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

Basically this script above targets the id="hide"

so when you click on the id element "hide" it starts up the Jquery function and hides the <p> element.

Then the same way targets id="show"

Just get a good read on it, it's quite simple to understand.