<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
  $(function(){

//添加
   $(".q").click(function(){
    var $new1 = $("#xingming").val();
    var $new2 = $("#xingbie").val();
    var $new3 = $("#kahao").val();
    var $new4 = $("#huiyuan").val();
    var $new5 = $("#dianhua").val();
    var $new6 = $("#chusheng").val();
    var $new7 = $("#xiaofei").val();
    
    
    var $tr = $("<tr><td><input type='checkbox' class='qq'></td><td>"+$new1+"</td><td>"+$new2+"</td><td>"+$new3+"</td><td>"+$new4+"</td><td>"+$new5+"</td><td>"+$new6+"</td><td>"+$new7+"</td><td><input type='button' style='background-image: url(img/add.jpg); width: 30px; height: 30px;'></td><td><input type='button' class='o' style='background-image: url(img/del.jpg); width: 30px; height: 30px;' /></td></tr>")
     $("table[class='dd']").append($tr);
     
     //添加之后清空
     $("#xingming").val("");
     $("#xingbie").val("");
     $("#kahao").val("");
     $("#huiyuan").val("");
     $("#dianhua").val("");
     $("#chusheng").val("");
     $("#xiaofei").val("");
    
   })
   
   //删除行
   $(".o").live("click",function(){
    $(this).parent().parent().remove();
   })
   
   
   
   
     //checkbox 全选
     $("#che").click(function(){
      if(this.checked){
       $(".qq").prop("checked",true);
      }else{
       $(".qq").prop("checked",false);
      }
     })
   
   
   //函数allchk()就是用来检测全选框.qq应该是选中状态还是未选中状态的
   
   function allchk(){
    var chknum = $(".qq").size(); //选项总个数
    var chk = 0;
    $(".qq").each(function(){
     if($(this).prop("checked")==true){
      chk++;
     }
    });
    
    if(chknum==chk){//全选
     $("#che").prop("checked",true);
    }else{//不全选
     $("#che").prop("checked",false);
    }
    
    
   }
   
   
   //当checkbox全部选中时，全选按钮自动选中
   $(".qq").click(function(){
    allchk();
   })
   
   
  })
 </script>
 <body>
  <table class="dd"  border="1px solid " cellpadding="0" cellspacing="0">
   <tr>
    <td><input type="checkbox" id="che"></td>
    <td>姓&nbsp;名</td>
    <td>性&nbsp;别</td>
    <td>卡号</td>
    <td>会员级别</td>
    <td>电话号码</td>
    <td>出生年月</td>
    <td>消费金额</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="qq"></td>
    <td>张三</td>
    <td>男</td>
    <td>1554154554</td>
    <td>短工</td>
    <td>15723657894</td>
    <td>1999-4-25</td>
    <td>10,000.00</td>
    <td><input type="button"  style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
         <td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
   </tr>
   <tr>
    <td><input type="checkbox" class="qq"></td>
    <td>张三</td>
    <td>男</td>
    <td>1554154554</td>
    <td>短工</td>
    <td>15723657894</td>
    <td>1999-4-25</td>
    <td>10,000.00</td>
    <td><input type="button" style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
        <td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
   </tr>
   <tr>
    <td><input type="checkbox" class="qq"></td>
    <td>张三</td>
    <td>男</td>
    <td>1554154554</td>
    <td>短工</td>
    <td>15723657894</td>
    <td>1999-4-25</td>
    <td>10,000.00</td>
    <td><input type="button" style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
         <td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
   </tr>
  </table>
     <input type="button" id="shan" value="删除所选" />
  <table  border="1px" cellspacing="0">
   <tr>
    <td>姓名<input type="text" id="xingming"></td></tr>
    <tr><td>性别<input type="text" id="xingbie"></td></tr>
    <tr><td>卡号<input type="text" id="kahao"></td></tr>
    <tr><td>会员级别<input type="text" id="huiyuan"></td></tr>
    <tr><td>电话号码<input type="text" id="dianhua"></td></tr>
    <tr><td>出生年月<input type="text" id="chusheng"></td></tr>
    <tr><td>消费金额<input type="text" id="xiaofei"></td></tr>
    
       <tr><td><input type="button" class="q" value="确定添加"</td></tr>
  </table>
  
 </body>
</html>

Jquery 实现添加删除，checkbok 的全选，反全选，但是批量删除没有实现的更多相关文章

  1. angularJs获取复选框中id 进行批量删除

    主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...

  2. 作业：汽车查询--弹窗显示详情，批量删除 php做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  3. PHP实现批量删除（封装）

    前台 <!DOCTYPE html> <html> <head> <title>批量删除</title> </head> < ...

  4. sql server中的大数据的批量操作（批量插入，批量删除）

    首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...

  5. 【shell脚本】创建账户及删除账户，批量创建账户及批量删除账户===autoCreateUser.sh

    一.字符串运算符 二.创建账户 1.提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码.如果用户不输入账户名,则提示必须输入账户名并退出脚本;如果用户不输入密码,则统一使用默认的 123456 ...

  6. Redis【知识点】批量删除指定Key

    Redis中有删除单条数据的命令DEL但是他没有批量删除多条数据的方法,那我们怎么去批量删除多条数据呢! 第一种方式 /work/app/redis/bin/redis-cli -a youpassw ...

  7. jeasyUI的treegrid批量删除多行(转载)

    看上去,JavaScript的变量类型,也可以分为值类型和引用类型.赋值操作中,值类型,各自独立,互不干涉:引用类型,指针而已,大家指向同一个对象. 为什么这样说呢? 我是从jeasyUI的treeg ...

  8. hibernate的批量删除

    转自:hibernate的批量删除一般而言,hibernate的批量删除的写法有两种,一种是hibernate内置的批量删除,不过他的批量删除是将每条记录逐一生成删除语句,其效率极低,当然我们可以使用 ...

  9. redis 通配符 批量删除key

    Redis 中 DEL指令支持多个key作为参数进行删除 但不支持通配符,无法通过通配符批量删除key,不过我们可以借助 Linux 的管道和 xargs 指令来完成这个动作. 比如要删除所有以use ...

  10. 批量删除git分支

    本篇文章由:http://xinpure.com/bulk-delete-git-branching/ 批量删除git分支 使用 git 时候,经常会发现,不知不觉就创建了大量的分支.那么,麻烦事就来 ...

随机推荐

  1. 【PostgreSQL】 前缀模糊查询级优化

    前匹配模糊 使用B-Tree来加速优化前匹配模糊查询 构造数据 新建一张商品表,插入一千万条数据. create table goods(id int, name varchar); insert i ...

  2. Linux 运行jar包命令(Cent OS 7后台运行jar包)

    Linux 运行jar包命令如下: 方式一 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 java -jar shareniu. ...

  3. BZOJ 1067：[SCOI2007]降雨量（RMQ+思维）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1067 题意:…… 思路:首先我们开一个数组记录年份,一个记录降雨量,因为年份是按升序排列的,所以我们 ...

  4. DRF 版本、认证、权限、限制、解析器和渲染器

    目录 一.DRF之版本控制 为什么要有版本控制? DRF提供的版本控制方案 版本的使用 全局配置 局部配置(使用较少) 二.DRF之认证 内置的认证 步骤 三.DRF之权限 1.自定义一个权限类 2. ...

  5. Spring WebFlux之HttpHandler的探索

    这是本人正在写的<Java 编程方法论:响应式Reactor3.Reactor-Netty和Spring WebFlux>一书的文章节选,它是<Java编程方法论:响应式RxJava ...

  6. HBaseCon Asia2019 会议总结

    一.首先会议流程. 1. The current status of HBase 2.The advantage and technology trend of HBase on the cloud ...

  7. CentOS下搭建Git服务器(基于SSH协议)

    1,安装Git所需依赖包      # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel      # ...

  8. 统计学习方法（李航）朴素贝叶斯python实现

    朴素贝叶斯法 首先训练朴素贝叶斯模型,对应算法4.1(1),分别计算先验概率及条件概率,分别存在字典priorP和condP中(初始化函数中定义).其中,计算一个向量各元素频率的操作反复出现,定义为c ...

  9. linux初学者-软件安装与管理篇

    linux初学者-软件安装与管理篇 在linux的学习和工作中需要安装许多的软件.在redhat的linux操作系统下,软件一般都是rpm格式的.以下将介绍一些软件安装和管理的内容. 1.软件名称 在 ...

  10. Spring MVC中的 权限拦截定义 以及 权限拦截的研发步骤

    权限拦截 (拦截器: 对请求进行区分) 1 实现的价值(作用) 用户未登录:访问没用登录的URL,拦截到以后 跳转回登录 用户未登录:访问登录的URL,直接放行到后续流程处理框架,进行后续的操作 用户 ...