jQuery-数据管理-删除事件

  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>