看著書上的代碼，自己敲了好一陣，發(fā)現(xiàn)自己優(yōu)化后的代碼比書上的更簡(jiǎn)潔，功能也更多，貼出來(lái)，留后用。
功能：
表格行點(diǎn)擊變背景色、選擇刪除、全選刪除、圖片原圖顯示
效果顯示：
代碼貼上：
<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(){ //點(diǎn)擊表格行變色 $('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(); }); //點(diǎn)擊全選 $('#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>選項(xiàng)</th> <th>編號(hào)</th> <th>封面</th> <th>購(gòu)書人</th> <th>性別</th> <th>夠書價(jià)</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>愛(ài)丁堡</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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
