<!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>

     <title>数据管理</title>

     <script type="text/javascript"

             src="Jscript/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}

            .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(3000);//显示图片

             })

             /**小图片鼠标移出事件**/

             $("table tr td img").mouseout(function() {

                 $("#imgTip").hide();//隐藏图片

             })

         })

     </script>

 </head>

 <body>

     <table>

         <tr>

            <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>

         </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>

         </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>

         </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"/>

 </body>

 </html>

jQuery-数据管理-删除事件的更多相关文章

  1. 【jquery】【ztree】节点添加自定义按钮、编辑和删除事件改成自己定义事件

    setting添加 edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: sh ...

  2. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. jquery动态删除html代码

    1.remove() remove()方法移除被选元素,包括所有的文本和子节点. 语法:$(selector).remove() 当我们想将元素自身移除时我们用 .remove(),同时也会移除元素内 ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  6. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  7. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  8. jquery的change 事件

    jquery的change 事件 . <script src="jquery.min.js" type="text/javascript">< ...

  9. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  10. jQuery 参考手册 - 事件

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. bind()向匹配元素附加一个或更多事件处理器 $(selector).bind(event,function) $(select ...

随机推荐

  1. Python使用xml.dom解析xml

    在菜鸟教程上找了个关于电影信息的xml类型的文档,用python内置的xml.dom来解析提取一下信息. 先复习一下xml概念: XML 指可扩展标记语言(EXtensible Markup Lang ...

  2. Python：random模块

    近排练习代码时候经常会用到random模块,以防后面忘记还是需要记录一下. 首先导入模块: import random random.random():用于生成一个0到1的随机浮点数: 0 <= ...

  3. Rabbitmq关于集群节点功能的读书笔记

    消息和队列可以指定是否持久化,如果指定持久化则会保存到硬盘上 ,不然只在内存里 普通集群模式下持久化的队列不能重建了 内存节点和磁盘节点的区别就是将元数据放在了内存还是硬盘,仅此而已,当在集群中声明队 ...

  4. 双栈算术表达式求值算法 栈(Stack) - Java实现

    https://mp.weixin.qq.com/s/dg8mgd6CIQ7Tui1_fQwSBA https://github.com/toywei/DataStructure/tree/maste ...

  5. PP图和QQ图 检查2个数据集是否符合同一分布

    1.QQ图检查2个数据集是否符合同一分布,Purpose:Check If Two Data Sets Can Be Fit With the Same Distribution PP图和QQ图 - ...

  6. mysql帮助命令

    HELP contents 查看MySQL命令的使用. eg: HELP 'Data Type' 查看所有的数据类型的使用方法.

  7. Java 输入/输出——Java虚拟机读写其它进程的数据

    使用 Runtime对象的exec()方法可以运行平台上的其它程序,该方法产生一个Process对象,Process对象代表由该Java程序启动的子进程.Process类提供了如下三个方法,用于让程序 ...

  8. ORACLE之PACKAGE-包、存储过程、函数

    1,简单的包. 创建包规范: create or replace package pack_test1 is -- 定义过程1 procedure p_test1(p_1 in varchar2); ...

  9. mysql学习【第2篇】：MySQL数据管理

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第2篇]:MySQL数据管理 外键管理 外键概念 如果公共关键字在一个关系中是主 ...

  10. Chromimu与JS交互的测试

    CHROMIMU与JS交互的测试 好东西 谷歌浏览器 学习 研究  http://blog.csdn.net/grassdragon/article/details/51659798 Chromimu ...