首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery 掩藏显示行

2012-11-22 
jquery 隐藏显示行htmlstyle.button1 {background:url(pic\add.png)border:0px}/stylebodyscrip

jquery 隐藏显示行
<html>
<style>
.button1 {background:url(pic\add.png);border:0px}
</style>
<body>  
  
<script language="javascript" src="jquery-1.3.1.js"></script>  
 
<script type="text/javascript">  
$(document).ready(function(){  
            $("td:eq(3)",$("tr")).hide();  
            $('tr').find('td:eq(4)').hide();
            $('tr').find('td:eq(2)').hide();
            $("#button1").click(function(){  
                    $("td:eq(3)",$("tr")).toggle(0); //设置为0表示不用动画 ,1000就1秒的时间来展示或者隐藏  
                    $("td:eq(4)",$("tr")).toggle(0);   
                    $("td:eq(2)",$("tr")).toggle(0);   
                 }).toggle(
function(){
$("#button1").html('<img src="pic/del.png">');
},function(){
$("#button1").html('<img src="pic/add.png">');
}
);     
    });  
    
     
</script>  
 
<table id="mytable"  border="1"  cellpadding="0" 
  cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">  
  <tr >  
     <td width="200">第一列</td>  
      <td  width="200">第二列<span id="button1"><img src="pic/add.png"></span></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>

热点排行