1, may have used visibility on the times, the most commonly used is visible and hidden, used to make the element display or hide.
There is also a third rarely used value is collapse, except in the table row, the column uses the difference, he and hidden role is equivalent.
Let's take a look at the table elements, the collapse is how to work, but the premise is that table border-collapse need to be set to separate will have effect Oh!
Directly below the demo:
The main () code is as follows:
<table cellspacing= "0" class= "table" > <tbody><tr> <th>Fruits</th> < th>vegetables</th> <th>Rocks</th> </tr> <tr> <td>apple </td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td>Cabbage</td> <td>Flint</td> </ Tr></tbody></table>
The 2.js files are as follows:
var btns = document.getelementsbytagname (' button '), rows = document.getElementsByTagName (' tr '); Btns[0]. AddEventListener (' click ', Function () { rows[1].classname = ' <a href= ' http://www.php1.cn/' >vc</a> ';} , false); Btns[1].addeventlistener (' click ', Function () { rows[1].classname = ' vh ';}, False); Btns[2].addeventlistener (' Click ', function () { rows[1].classname = ';}, False);
3. css files are as follows:
body { text-align:center; padding-top:20px; Font-family:arial, Sans-serif;} Table { border-collapse:separate; border-spacing:5px; Border:solid 1px black; width:500px; margin:0 Auto;} Th, TD { text-align:center; Border:solid 1px black; padding:10px;} . VC { visibility:collapse;}. VH { Visibility:hidden;} button { margin-top:5px;}
The default output is:
When you click Collapse ROW1, the following is displayed:
When you click Hide ROW1, the following is displayed:
Although collapse has hidden characteristics, the form of expression differs greatly from that of hidden; now you can make a choice according to your needs.