转:http://blog.csdn.net/newyear1988/article/details/7402593
| <html> | |
| <body> | |
| <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $("td:eq(2)",$("tr")).hide(); | |
| $("td:eq(3)",$("tr")).hide(); | |
| $("td:eq(4)",$("tr")).hide(); | |
| $("#button1").click(function(){ | |
| $("td:eq(2)",$("tr")).toggle(1000); //设置为0表示不用动画 ，1000就1秒的时间来展示或者隐藏 | |
| $("td:eq(3)",$("tr")).toggle(1000); | |
| $("td:eq(4)",$("tr")).toggle(1000); | |
| }); | |
| }); | |
| </script> | |
| <input type="button" id="button1" value="隐藏/显示后三列"/> | |
| <table id="mytable" border="1" cellpadding="0" cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;"> | |
| <tr> | |
| <td width="200">第一列</td> | |
| <td width="200">第二列</td> | |
| <td width="200">第三列</td> | |
| <td width="200">第四列</td> | |
| <td width="200">第五列</td> | |
| </tr> | |
| <tr> | |
| <td>id</td> | |
| <td>id1</td> | |
| <td>id2</td> | |
| <td>id3</td> | |
| <td>id4</td> | |
| </tr> | |
| <tr> | |
| <td>id</td> | |
| <td>id1</td> | |
| <td>id2</td> | |
| <td>id3</td> | |
| <td>id4</td> | |
| </tr> | |
| <tr> | |
| <td>id</td> | |
| <td>id1</td> | |
| <td>id2</td> | |
| <td>id3</td> | |
| <td>id4</td> | |
| </tr> | |
| <tr> | |
| <td>id</td> | |
| <td>id1</td> | |
| <td>id2</td> | |
| <td>id3</td> | |
| <td>id4</td> | |
| </tr> | |
| <tr> | |
| <td>id</td> | |
| <td>id1</td> | |
| <td>id2</td> | |
| <td>id3</td> | |
| <td>id4</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
