jQuery展示表格點擊變色、全選、刪除
看著書上的代碼,自己敲了好一陣,發(fā)現(xiàn)自己優(yōu)化后的代碼比書上的更簡潔,功能也更多,貼出來,留后用。
功能:
表格行點擊變背景色、選擇刪除、全選刪除、圖片原圖顯示
效果顯示:
代碼貼上:
<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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery LigerUI 使用教程表格篇(1)
- jQuery操作表格(table)的常用方法、技巧匯總
- jQuery表格插件datatables用法總結
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的編輯插件
相關文章
jQuery實現(xiàn)滾動條滾動到子元素位置(方便定位)
本文主要介紹了jQuery實現(xiàn)滾動條滾動到子元素位置的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據(jù)操作示例
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據(jù)操作,涉及jQuery事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07jquery實現(xiàn)文字單行橫移或翻轉(zhuǎn)(上下、左右跳轉(zhuǎn))
本文詳細介紹了jquery實現(xiàn)單行橫移或翻轉(zhuǎn)(上下、左右跳轉(zhuǎn))的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01jquery根據(jù)一個值來選中select下的option實例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個值來選中select下的option實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)硪黄猨Query的中 is(':visible') 解析及用法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼
這篇文章主要介紹了jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10