jQuery展示表格點(diǎn)擊變色、全選、刪除
看著書(shū)上的代碼,自己敲了好一陣,發(fā)現(xiàn)自己優(yōu)化后的代碼比書(shū)上的更簡(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)書(shū)人</th> <th>性別</th> <th>夠書(shū)價(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í)有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹(shù)表格使用介紹
- jQuery EasyUI中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery LigerUI 使用教程表格篇(1)
- jQuery操作表格(table)的常用方法、技巧匯總
- jQuery表格插件datatables用法總結(jié)
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的編輯插件
相關(guān)文章
jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置(方便定位)
本文主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法
這篇文章主要介紹了jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07jquery實(shí)現(xiàn)文字單行橫移或翻轉(zhuǎn)(上下、左右跳轉(zhuǎn))
本文詳細(xì)介紹了jquery實(shí)現(xiàn)單行橫移或翻轉(zhuǎn)(上下、左右跳轉(zhuǎn))的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能,實(shí)現(xiàn)非常簡(jiǎn)單,我們直接可以利用jQuery內(nèi)部封裝的拖拽接口即可簡(jiǎn)單實(shí)現(xiàn)在網(wǎng)頁(yè)上拖拽任意元素的功能,感興趣的小伙伴們可以參考一下2015-11-11jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下2015-07-07jquery根據(jù)一個(gè)值來(lái)選中select下的option實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jquery根據(jù)一個(gè)值來(lái)選中select下的option實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jQuery中bind與live的用法及區(qū)別小結(jié)
本篇文章主要是對(duì)jQuery中bind與live的用法以及區(qū)別進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)?lái)一篇jQuery的中 is(':visible') 解析及用法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery Ajax實(shí)現(xiàn)Select多級(jí)關(guān)聯(lián)動(dòng)態(tài)綁定數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了jQuery Ajax實(shí)現(xiàn)Select多級(jí)關(guān)聯(lián)動(dòng)態(tài)綁定數(shù)據(jù)的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10