1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>数据删除和图片预览在项目中的应用</title> 6 <style> 7 body{font-size: 12px;} 8 table{width: 360px;border-collapse: collapse;} 9 table,tr,th,td{border: solid 1px #666;text-align: center;} 10 table tr td img{border: solid 1px #ccc;padding: 3px;width: 42px;height: 60px;cursor: pointer;} 11 table tr td span{float: left;padding-left: 12px;} 12 table tr th{background-color: #ccc;height: 32px;} 13 .clsImg{position: absolute;border: solid 1px #ccc;padding: 3px;width: 290px;height: 170px;background-color: #eee;display: none;} 14 .btn{border: solid 1px #666;padding: 2px;width: 50px;} 15 </style> 16 <script type="text/javascript" src="jquery-1.8.3.js"></script> 17 <script> 18 $(function(){ 19 $("table tr:nth-child(odd)").css("background-color","#eee"); //隔行变色 20 21 /** 全选复选框单机事件 **/ 22 $("#chkAll").click(function(){ 23 if(this.checked){ //如果自己被选中 24 $("table tr td input[type='checkbox']").attr("checked",true); 25 }else{ //如果自己没有被选中 26 $("table tr td input[type='checkbox']").attr("checked",false); 27 }$ 28 }); 29 30 /** 删除按钮单机事件 **/ 31 $("#btnDel").click(function(){ 32 //获取除全选复选框外的所有选中项 33 var intL=$("table tr td input:checked:not('#chkAll')").length; 34 if(intL != 0){ 35 $("table tr td input[type='checkbox']:not('#chkAll')").each(function(index){ //遍历除全选复选框外的行 36 if(this.checked){ //如果选中 37 $("table tr[id="+this.value+"]").remove(); //获取选中的值，并删除该值所在的行 38 } 39 }) 40 } 41 }); 42 43 /** 小图片鼠标移动事件 **/ 44 var x=5; var y=15; //初始化提示图片位置 45 $("table tr td img").mousemove(function(e){ 46 $("#imgTip").attr("src",this.src) //设置提示图片src属性 47 .css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}) //设置提示图片的位置 48 .show(); //显示图片 49 }) 50 51 /** 小图片鼠标移出事件 **/ 52 $("table tr td img").mouseout(function(){ 53 $("#imgTip").hide(); //隐藏图片 54 }) 55 }); 56 </script> 57 </head> 58 <body> 59 <table> 60 <tr> 61 <th>选项</th> 62 <th>编号</th> 63 <th>封面</th> 64 <th>购书人</th> 65 <th>性别</th> 66 <th>购书价</th> 67 </tr> 68 <tr id="0"> 69 <td><input type="checkbox" id="Checkbox1" value="0"></td> 70 <td>10000</td> 71 <td><img src="images/1.png" alt="" /></td> 72 <td>张小三</td> 73 <td>男</td> 74 <td>35.8元</td> 75 </tr> 76 <tr id="1"> 77 <td><input type="checkbox" id="Checkbox1" value="1"></td> 78 <td>10000</td> 79 <td><img src="images/2.png" alt="" /></td> 80 <td>小梅</td> 81 <td>女</td> 82 <td>98元</td> 83 </tr> 84 <tr id="2"> 85 <td><input type="checkbox" id="Checkbox1" value="2"></td> 86 <td>10000</td> 87 <td><img src="images/3.png" alt="" /></td> 88 <td>王麻子</td> 89 <td>男</td> 90 <td>35.8元</td> 91 </tr> 92 <tr id="3"> 93 <td><input type="checkbox" id="Checkbox1" value="3"></td> 94 <td>10000</td> 95 <td><img src="images/4.png" alt="" /></td> 96 <td>沙碧军</td> 97 <td>女</td> 98 <td>45.8元</td> 99 </tr> 100 <tr id="4"> 101 <td><input type="checkbox" id="Checkbox1" value="4"></td> 102 <td>10000</td> 103 <td><img src="images/5.png" alt="" /></td> 104 <td>白痴旺</td> 105 <td>男</td> 106 <td>32.8元</td> 107 </tr> 108 </table> 109 <table> 110 <tr> 111 <td style="text-align:left;height:28px;"> 112 <span><input type="checkbox" id="chkAll">全选</span> 113 <span><input type="button" id="btnDel" value="删除" class="btn"></span> 114 </td> 115 </tr> 116 </table> 117 <img src="images/1.png" alt="" id="imgTip" class="clsImg" /> 118 </body> 119 </html>
附图片5张：
结果如下图所示：
