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>

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. Linux下稀疏文件的存储方式

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  2. DEV获取GridControl当前行

    //直接通过gridView获取当前行dr=this.gridView1.GetDataRow(this.gridView1.FocusedRowHandle);//通过DataSet获取数据,需要转 ...

  3. Xshell远程连接 与 Xftp文件传输

    刚开始接触Linux的时候,会想我该怎么在Windows连接到另一台Linux服务器,怎么把我Windows上的文件放到我Linux上面,网上搜索之后,知道可以用Xshell远程连接到Linux,用X ...

  4. ubuntu安装jupyter 并设置远程访问

    Jupyter Notebook是一个Web应用程序,允许您创建和共享包含实时代码,方程,可视化和说明文本的文档. 简单的介绍就是:Jupyter Notebook是Ipython的升级版,而Ipyt ...

  5. 如何让html中的td文字只显示部分

    以下笔记有待测试 ———————————————————— <table style="table-layout:fixed"> <tr> <td s ...

  6. 浏览器的兼容性（CSS浏览器兼容性、CSS hack）

    一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...

  7. JavaScript字符串String

    JavaScript中String类型用于表示由零个或者多个16位Unicode字符组成的字符序列即字符串:同时字符串可以用单引号或双引号表示. 下面是一些特殊的字面量: 字面量 含义\n 换行\t ...

  8. SpringBoot-热部署Devtools

    热部署 什么是热部署 所谓的热部署:比如项目的热部署,就是在应用程序在不停止的情况下,实现新的部署 项目演示案例 @RestController @Slf4j public class IndexCo ...

  9. SectionList的使用

    这个是效果: 第一步:准备数据源:Car.json {"data": [ { "cars": [ { "icon": "m_180 ...

  10. 20181211 Oracle Parallel

    如下用Select作为参考, Select 在sql server中如果直接查询大量的数据,方式为给列增加Index,可以提高效率.如果查询数据量非常大的时候其实效率依旧不高,而且index在增删改中 ...