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"> 3 <head> 4 <title>数据管理</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.8.2.min.js"> 7 </script> 8 <style type="text/css"> 9 body{font-size:12px} 10 table{360px;border-collapse:collapse} 11 table tr th,td{border:solid 1px #666;text-align:center} 12 table tr td img{border:solid 1px #ccc;padding:3px;42px;height:60px;cursor:hand} 13 table tr td span{float:left;padding-left:12px;} 14 table tr th{background-color:#ccc;height:32px} 15 .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;85px;height:120px; background-color:#eee;display:none} 16 .btn {border:#666 1px solid;padding:2px;50px; 17 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} 18 </style> 19 <script type="text/javascript" > 20 $(function() { 21 $("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色 22 23 /**全选复选框单击事件**/ 24 $("#chkAll").click(function() { 25 if (this.checked) {//如果自己被选中 26 $("table tr td input[type=checkbox]").attr("checked", true); 27 } 28 else {//如果自己没有被选中 29 $("table tr td input[type=checkbox]").attr("checked", false); 30 } 31 }) 32 33 /**删除按钮单击事件**/ 34 $("#btnDel").click(function() { 35 var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项 36 if (intL != 0) {//如果有选中项 37 $("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {//遍历除全选复选框外的行 38 if (this.checked) {//如果选中 39 $("table tr[id=" + this.value + "]").remove(); //获取选中的值，并删除该值所在的行 40 } 41 }) 42 } 43 }) 44 45 /**小图片鼠标移动事件**/ 46 var x = 5; var y = 15;//初始化提示图片位置 47 $("table tr td img").mousemove(function(e) { 48 $("#imgTip") 49 .attr("src", this.src)//设置提示图片scr属性 50 .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })//设置提示图片的位置 51 .show(3000);//显示图片 52 }) 53 54 /**小图片鼠标移出事件**/ 55 $("table tr td img").mouseout(function() { 56 $("#imgTip").hide();//隐藏图片 57 }) 58 59 }) 60 </script> 61 </head> 62 <body> 63 <table> 64 <tr> 65 <th>选项</th> 66 <th>编号</th> 67 <th>封面</th> 68 <th>购书人</th> 69 <th>性别</th> 70 <th>购书价</th> 71 </tr> 72 <tr id="0"> 73 <td><input id="Checkbox1" type="checkbox" value="0"/></td> 74 <td>1001</td> 75 <td><img src="Images/img03.jpg" alt="" /></td> 76 <td>李小明</td> 77 <td>男</td> 78 <td>35.60 元</td> 79 </tr> 80 <tr id="1"> 81 <td><input id="Checkbox2" type="checkbox" value="1"/></td> 82 <td>1002</td> 83 <td><img src="Images/img04.jpg" alt="" /></td> 84 <td>刘明明</td> 85 <td>女</td> 86 <td>37.80 元</td> 87 </tr> 88 <tr id="2"> 89 <td><input id="Checkbox3" type="checkbox" value="2"/></td> 90 <td>1003</td> 91 <td><img src="Images/img08.jpg" alt="" /></td> 92 <td>张小星</td> 93 <td>女</td> 94 <td>45.60 元</td> 95 </tr> 96 </table> 97 <table> 98 <tr> 99 <td style="text-align:left;height:28px"> 100 <span><input id="chkAll" type="checkbox" />全选</span> 101 <span><input id="btnDel" type="button" value="删除" class="btn" /></span> 102 </td> 103 </tr> 104 </table> 105 <img id="imgTip" class="clsImg" src="Images/img03.gif"/> 106 </body> 107 </html>