34. jQuery-資料刪除和圖片預覽再專案中的應用
阿新 • • 發佈：2018-12-22
1.效果圖
2.html程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery-資料刪除和圖片預覽再專案中的應用</title> <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:hand} table tr td span{float:left;padding-left:12px;} table tr th{background-color:#ccc;height:32px} .clsImg{position:absolute;border:solid 1px #ccc; padding:3px;width:85px;height:120px; background-color:#eee;display:none} .btn {border:#666 1px solid;padding:2px;width:50px; filter: progid:DXImageTransform.Microsoft .Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> </head> <body> <table> <tr> <th>選項</th> <th>編號</th> <th>封面</th> <th>購書人</th> <th>性別</th> <th>購書價</th> </tr> <tr id="0"> <td><input id="Checkbox1" type="checkbox" value="0"/></td> <td>1001</td> <td><img src="../img/pig.jpg" alt="" /></td> <td>大都督</td> <td>男</td> <td>35.60 元</td> </tr> <tr id="1"> <td><input id="Checkbox2" type="checkbox" value="1"/></td> <td>1002</td> <td><img src="../img/pig.jpg" alt="" /></td> <td>大都督1</td> <td>女</td> <td>37.80 元</td> </tr> <tr id="2"> <td><input id="Checkbox3" type="checkbox" value="2"/></td><td>1003</td> <td><img src="../img/pig.jpg" alt="" /></td> <td>大都督2</td> <td>女</td> <td>45.60 元</td> </tr> </table> <table> <tr> <td style="text-align:left;height:28px"> <span><input id="chkAll" type="checkbox" />全選</span> <span><input id="btnDel" type="button" value="刪除" class="btn" /></span> </td> </tr> </table> <img id="imgTip" class="clsImg" src="../img/pig.jpg"/> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //隔行變色 $("table tr:nth-child(odd)").css("background-color", "#eee"); //全選複選框單擊事件 $("#chkAll").click(function(){ if (this.checked) {//如果自己被選中 $("table tr td input[type=checkbox]").attr("checked", true); }else {//如果自己沒有被選中 $("table tr td input[type=checkbox]").attr("checked", false); } }) //刪除按鈕單擊事件 $("#btnDel").click(function(){ //獲取除全選複選框外的所有選中項 var intL = $("table tr td input:checked:not('#chkAll')").length; if (intL != 0) {//如果有選中項 $("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) { if (this.checked){//如果選中 //獲取選中的值，並刪除該值所在的行 $("table tr[id="+this.value+"]").remove(); } }) } }) //初始化圖片提示位置 var x = 5; var y = 15; //小圖片滑鼠移動事件 $("table tr td img").mousemove(function(e){ //設定提示圖片src屬性 $("#imgTip").attr("src", this.src) //設定提示圖片的位置 .css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}) //顯示圖片 .show(1000); }) //小圖片滑鼠移出事件 $("table tr td img").mouseout(function(){ //隱藏圖片 $("#imgTip").hide(); }) }); </script> </body> </html>