<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title> 数据管理 </title> <script type="text/javascript" src="jquery-1.8.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: 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 } .clsSpan { position: absolute; border: solid 1px #ccc; padding: 3px; width: 80px; background-color: rgba(93, 184, 146, 0.884); display: none } .btn { border: #666 1px solid; padding: 2px; width: 50px; filter: progid:DXImageTransform.Microsoft .Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8); } </style> <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) { $("#imgTip") .attr("src", this.src)// 设置提示图片 scr 属性 .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })// 设置提示图片的位置 .show(30);// 显示图片 }) /** 小图片鼠标移出事件 **/ $("table tr td img").mouseout(function () { $("#imgTip").hide();// 隐藏图片 }) // 文本值 $("table tr td div").mousemove(function (e) { $("#spanTip") .text($(this).text()) .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })// 设置提示图片的位置 .show(30);// 显示图片 }) /** 文本鼠标移出事件 **/ $("table tr td div").mouseout(function () { $("#spanTip").hide();// 隐藏图片 }) }) </script> </head> <body> <table> <tr> <th> 选项 </th> <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="Images/img03.jpg" alt="" /></td> <td> 李小明 </td> <td> 男 </td> <td>35.60 元 </td> <td><div>ASP.NET</div> </td> </tr> <tr id="1"> <td><input id="Checkbox2" type="checkbox" value="1" /></td> <td>1002</td> <td><img src="Images/img04.jpg" alt="" /></td> <td> 刘明明 </td> <td> 女 </td> <td>37.80 元 </td> <td><div>C#网站开发</div> </td> </tr> <tr id="2"> <td><input id="Checkbox3" type="checkbox" value="2" /></td> <td>1003</td> <td><img src="Images/img08.jpg" alt="" /></td> <td> 张小星 </td> <td> 女 </td> <td>45.60 元 </td> <td> <div>ASP</div> </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="Images/img03.gif" /> <div id="spanTip" class="clsSpan" style="font-size:20px;"></div> </body> </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 <meta charset="utf-8"> 7 <title> 数据管理 </title> 8 <script type="text/javascript" src="jquery-1.8.2.min.js"> 9 10 11 12 </script> 13 <style type="text/css"> 14 body { 15 font-size: 12px 16 } 17 18 table { 19 width: 360px; 20 border-collapse: collapse 21 } 22 23 table tr th, 24 td { 25 border: solid 1px #666; 26 text-align: center 27 } 28 29 table tr td img { 30 border: solid 1px #ccc; 31 padding: 3px; 32 width: 42px; 33 height: 60px; 34 cursor: hand 35 } 36 37 table tr td span { 38 float: left; 39 padding-left: 12px; 40 } 41 42 table tr th { 43 background-color: #ccc; 44 height: 32px 45 } 46 47 .clsImg { 48 position: absolute; 49 border: solid 1px #ccc; 50 padding: 3px; 51 width: 85px; 52 height: 120px; 53 background-color: #eee; 54 display: none 55 } 56 .clsSpan { 57 position: absolute; 58 border: solid 1px #ccc; 59 padding: 3px; 60 width: 80px; 61 62 background-color: rgba(93, 184, 146, 0.884); 63 display: none 64 } 65 66 .btn { 67 border: #666 1px solid; 68 padding: 2px; 69 width: 50px; 70 filter: progid:DXImageTransform.Microsoft .Gradient(GradientType=0, StartColorStr=#ffffff, 71 EndColorStr=#ECE9D8); 72 } 73 </style> 74 <script type="text/javascript"> 75 $(function () { 76 $("table tr:nth-child(odd)") 77 .css("background-color", "#eee"); // 隔行变色 78 /** 全选复选框单击事件 **/ 79 $("#chkAll").click(function () { 80 if (this.checked) {// 如果自己被选中 81 $("table tr td input[type=checkbox]") 82 .attr("checked", true); 83 } 84 else {// 如果自己没有被选中 85 $("table tr td input[type=checkbox]") 86 .attr("checked", false); 87 } 88 }) 89 /** 删除按钮单击事件 **/ 90 $("#btnDel").click(function () { 91 var intL = $("table tr td input:checked:not('#chkAll')").length; 92 // 获取除全选复选框外的所有选中项 93 if (intL != 0) {// 如果有选中项 94 $("table tr td input[type=checkbox]:not('#chkAll')") 95 .each(function (index) {// 遍历除全选复选框外的行 96 if (this.checked) {// 如果选中 97 $("table tr[id=" + this.value + "]").remove(); 98 // 获取选中的值，并删除该值所在的行 99 } 100 }) 101 } 102 }) 103 /** 小图片鼠标移动事件 **/ 104 var x = 5; var y = 15;// 初始化提示图片位置 105 $("table tr td img").mousemove(function (e) { 106 $("#imgTip") 107 .attr("src", this.src)// 设置提示图片 scr 属性 108 .css({ 109 "top": (e.pageY + y) + "px", 110 "left": (e.pageX + x) + "px" 111 })// 设置提示图片的位置 112 .show(30);// 显示图片 113 }) 114 /** 小图片鼠标移出事件 **/ 115 $("table tr td img").mouseout(function () { 116 $("#imgTip").hide();// 隐藏图片 117 }) 118 // 文本值 119 $("table tr td div").mousemove(function (e) { 120 $("#spanTip") 121 .text($(this).text()) 122 .css({ 123 "top": (e.pageY + y) + "px", 124 "left": (e.pageX + x) + "px" 125 })// 设置提示图片的位置 126 .show(30);// 显示图片 127 }) 128 /** 文本鼠标移出事件 **/ 129 $("table tr td div").mouseout(function () { 130 $("#spanTip").hide();// 隐藏图片 131 }) 132 }) 133 </script> 134 </head> 135 136 <body> 137 <table> 138 <tr> 139 <th> 选项 </th> 140 <th> 编号 </th> 141 <th> 封面 </th> 142 <th> 购书人 </th> 143 <th> 性别 </th> 144 <th> 购书价 </th> 145 <th>书名</th> 146 </tr> 147 <tr id="0"> 148 <td><input id="Checkbox1" type="checkbox" value="0" /></td> 149 <td>1001</td> 150 <td><img src="Images/img03.jpg" alt="" /></td> 151 <td> 李小明 </td> 152 <td> 男 </td> 153 <td>35.60 元 </td> 154 <td><div>ASP.NET</div> </td> 155 </tr> 156 <tr id="1"> 157 <td><input id="Checkbox2" type="checkbox" value="1" /></td> 158 <td>1002</td> 159 <td><img src="Images/img04.jpg" alt="" /></td> 160 <td> 刘明明 </td> 161 <td> 女 </td> 162 <td>37.80 元 </td> 163 <td><div>C#网站开发</div> </td> 164 </tr> 165 <tr id="2"> 166 <td><input id="Checkbox3" type="checkbox" value="2" /></td> 167 <td>1003</td> 168 <td><img src="Images/img08.jpg" alt="" /></td> 169 <td> 张小星 </td> 170 <td> 女 </td> 171 <td>45.60 元 </td> 172 <td> <div>ASP</div> </td> 173 </tr> 174 </table> 175 <table> 176 <tr> 177 <td style="text-align:left;height:28px"> 178 <span><input id="chkAll" type="checkbox" /> 全选 </span> 179 <span><input id="btnDel" type="button" value=" 删除 " class="btn" /></span> 180 </td> 181 </tr> 182 </table> 183 <img id="imgTip" class="clsImg" src="Images/img03.gif" /> 184 <div id="spanTip" class="clsSpan" style="font-size:20px;"></div> 185 186 </body> 187 188 </html>