jQuery展示表格点击变色、全选、删除

2019-11-19 18:07:34

字体：大中小

来源：转载

供稿：网友

看着书上的代码，自己敲了好一阵，发现自己优化后的代码比书上的更简洁，功能也更多，贴出来，留后用。

功能：

表格行点击变背景色、选择删除、全选删除、图片原图显示

效果显示：

代码贴上：

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <meta name="keywords" content=" keywords" />  <meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">  body{font-size:12px}  table{width:360px;border-collapse:collapse}  table tr th,td{border:solid 1px #666;text-align:center}  table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer}  table tr td span{float:left;padding-left:12px}  table tr th{background-color:#ccc;height:32px;background-color:#fff}  .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}  .btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}</style><body><script type="text/javascript">  $(function(){    //点击表格行变色    $('tr').click(function(){      if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){        this.style.cssText='background-color:#CCC';      }else{        this.style.cssText='background-color:#fff';      }    })    //放大图显示    $('.a').mousemove(function(e){      $('#imgTip').show().attr('src',this.src);      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});    });    $('.a').mouseover(function(e){      $('#imgTip').show().attr('src',this.src);      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});    });    $('.a').mouseout(function(){      $('#imgTip').hide();    });    //点击全选    $('#checkAll').click(function(){      if(this.checked){        $(':checkbox').attr('checked',true);      }else{        $(':checkbox').attr('checked',false);      }    });    //删除部分与全部    $('.btn').click(function(){      if($('#checkAll').attr('checked')){        $('table tr td :checkbox:not("#checkAll")').each(function(index){          $('#'+this.value).remove();        });      }else{        $(':checkbox:not("#checkAll")').each(function(index){          if(this.checked){            $('#'+this.value).remove();          }        })      }    });  });</script><table>  <tr>    <th>选项</th>    <th>编号</th>    <th>封面</th>    <th>购书人</th>    <th>性别</th>    <th>够书价</th>  </tr>  <tr id="0">    <td><input type="checkbox" name="" id="checkbox1" value="0" /></td>    <td>1001</td>    <td><img src="1.jpg" title="" alt="" class="a" /></td>    <td>李小明</td>    <td>男</td>    <td>35.6元</td>  </tr>  <tr id="1">    <td><input type="checkbox" name="" id="checkbox2" value="1" /></td>    <td>1002</td>    <td><img src="2.jpg" title="" alt="" class="a" /></td>    <td>王明</td>    <td>男</td>    <td>28.9元</td>  </tr>  <tr id="2">    <td><input type="checkbox" name="" id="checkbox3" value="2" /></td>    <td>1003</td>    <td><img src="3.jpg" title="" alt="" class="a" /></td>    <td>皮特</td>    <td>女</td>    <td>34.3元</td>  </tr>  <tr id="3">    <td><input type="checkbox" name="" id="checkbox3" value="3" /></td>    <td>2356</td>    <td><img src="4.jpg" title="" alt="" class="a" /></td>    <td>爱丁堡</td>    <td>男</td>    <td>23.3元</td>  </tr></table><table>  <tr>    <td style="text-align:left;height:28px">      <span><input type="checkbox" name="" id="checkAll" />全选</span>      <span><input type="button" value="删除" class="btn" /></span>    </td>  </tr></table><img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" /></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：AngularJS中update两次出现$promise属性无法识别的解决方法

下一篇：JSON字符串和JSON对象相互转化实例详解