jquery显示隐藏列

  1. <body>   
  2.   
  3. <script language="javascript" src="./script/jquery.js"></script>   
  4.   
  5. <script type="text/javascript">   
  6. $(document).ready(function(){   
  7.             $("td:eq(2)",$("tr")).hide();   
  8.             $("td:eq(3)",$("tr")).hide();   
  9.             $("td:eq(4)",$("tr")).hide();   
  10.             $("#button1").click(function(){   
  11.                     $("td:eq(2)",$("tr")).toggle(1000); //设置为0表示不用动画 ，1000就1秒的时间来展示或者隐藏   
  12.                     $("td:eq(3)",$("tr")).toggle(1000);    
  13.                     $("td:eq(4)",$("tr")).toggle(1000);    
  14.                  });       
  15.     });   
  16.        
  17.        
  18. </script>   
  19. <input type="button" id="button1" value="隐藏/显示后三列"/>   
  20.   
  21. <table id="mytable"  border="1"  cellpadding="0"  
  22.     cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   
  23.     <tr >   
  24.         <td width="200">第一列</td>   
  25.         <td  width="200">第二列</td>   
  26.         <td  width="200">第三列</td>   
  27.         <td  width="200">第四列</td>   
  28.         <td  width="200">第五列</td>   
  29.     </tr>   
  30.   
  31.     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
  32.        
  33.     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
  34.        
  35.     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
  36.        
  37.     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
  38.        
  39.     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
  40. </table>   
  41.   
  42.   
  43. </body>  

posted on 2010-07-23 08:36  tongdengquan  阅读(287)  评论(0)  编辑  收藏  举报