视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > jQuery教程 >

[jQuery]jQuery实现表格点击变色的代码例子

时间:2017-09-08 15:11酷播
[jQuery]jQuery实现表格点击变色的代码例子

[jQuery]jQuery实现表格点击变色的代码例子

  1. <!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title></title> 
  6.     <meta name="keywords" content=" keywords" /> 
  7.     <meta name="description" content="description" /> 
  8. </head> 
  9. <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  10. <style type="text/css"> 
  11.     body{font-size:12px} 
  12.     table{width:360px;border-collapse:collapse} 
  13.     table tr th,td{border:solid 1px #666;text-align:center} 
  14.     table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer} 
  15.     table tr td span{float:left;padding-left:12px} 
  16.     table tr th{background-color:#ccc;height:32px;background-color:#fff} 
  17.     .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer} 
  18.     .btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer} 
  19. </style> 
  20. <body> 
  21. <script type="text/javascript"> 
  22.     $(function(){ 
  23.         //点击表格行变色 
  24.         $('tr').click(function(){ 
  25.             if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){ 
  26.                 this.style.cssText='background-color:#CCC'; 
  27.             }else{ 
  28.                 this.style.cssText='background-color:#fff'; 
  29.             } 
  30.         }) 
  31.  
  32.         //放大图显示 
  33.         $('.a').mousemove(function(e){ 
  34.             $('#imgTip').show().attr('src',this.src); 
  35.             $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'}); 
  36.         }); 
  37.         $('.a').mouseover(function(e){ 
  38.             $('#imgTip').show().attr('src',this.src); 
  39.             $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'}); 
  40.         }); 
  41.         $('.a').mouseout(function(){ 
  42.             $('#imgTip').hide(); 
  43.         }); 
  44.  
  45.         //点击全选 
  46.         $('#checkAll').click(function(){ 
  47.             if(this.checked){ 
  48.                 $(':checkbox').attr('checked',true); 
  49.             }else{ 
  50.                 $(':checkbox').attr('checked',false); 
  51.             } 
  52.         }); 
  53.  
  54.         //删除部分与全部 
  55.         $('.btn').click(function(){ 
  56.             if($('#checkAll').attr('checked')){ 
  57.                 $('table tr td :checkbox:not("#checkAll")').each(function(index){ 
  58.                     $('#'+this.value).remove(); 
  59.                 }); 
  60.             }else{ 
  61.                 $(':checkbox:not("#checkAll")').each(function(index){ 
  62.                     if(this.checked){ 
  63.                         $('#'+this.value).remove(); 
  64.                     } 
  65.                 }) 
  66.             } 
  67.         }); 
  68.     }); 
  69. </script> 
  70.  
  71. <table> 
  72.     <tr> 
  73.         <th>选项</th> 
  74.         <th>编号</th> 
  75.         <th>封面</th> 
  76.         <th>购书人</th> 
  77.         <th>性别</th> 
  78.         <th>够书价</th> 
  79.     </tr> 
  80.     <tr id="0"> 
  81.         <td><input type="checkbox" name="" id="checkbox1" value="0" /></td> 
  82.         <td>1001</td> 
  83.         <td><img src="1.jpg" title="" alt="" class="a" /></td> 
  84.         <td>李小明</td> 
  85.         <td>男</td> 
  86.         <td>35.6元</td> 
  87.     </tr> 
  88.     <tr id="1"> 
  89.         <td><input type="checkbox" name="" id="checkbox2" value="1" /></td> 
  90.         <td>1002</td> 
  91.         <td><img src="2.jpg" title="" alt="" class="a" /></td> 
  92.         <td>王明</td> 
  93.         <td>男</td> 
  94.         <td>28.9元</td> 
  95.     </tr> 
  96.     <tr id="2"> 
  97.         <td><input type="checkbox" name="" id="checkbox3" value="2" /></td> 
  98.         <td>1003</td> 
  99.         <td><img src="3.jpg" title="" alt="" class="a" /></td> 
  100.         <td>皮特</td> 
  101.         <td>女</td> 
  102.         <td>34.3元</td> 
  103.     </tr> 
  104.     <tr id="3"> 
  105.         <td><input type="checkbox" name="" id="checkbox3" value="3" /></td> 
  106.         <td>2356</td> 
  107.         <td><img src="4.jpg" title="" alt="" class="a" /></td> 
  108.         <td>爱丁堡</td> 
  109.         <td>男</td> 
  110.         <td>23.3元</td> 
  111.     </tr> 
  112. </table> 
  113. <table> 
  114.     <tr> 
  115.         <td style="text-align:left;height:28px"> 
  116.             <span><input type="checkbox" name="" id="checkAll" />全选</span> 
  117.             <span><input type="button" value="删除" class="btn" /></span> 
  118.         </td> 
  119.     </tr> 
  120. </table> 
  121. <img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" /> 
  122. </body> 
  123. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器