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{width: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;width: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;width:85px;height:120px; background-color:#eee;display:none}
16 .btn {border:#666 1px solid;padding:2px;width: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>
浙公网安备 33010602011771号