Jquery 实现添加删除,checkbok 的全选,反全选,但是批量删除没有实现

<!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>姓 名</td>
<td>性 别</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 的全选,反全选,但是批量删除没有实现的更多相关文章
- angularJs获取复选框中id 进行批量删除
主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...
- 作业:汽车查询--弹窗显示详情,批量删除 php做法(0521)
作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- PHP实现批量删除(封装)
前台 <!DOCTYPE html> <html> <head> <title>批量删除</title> </head> < ...
- sql server中的大数据的批量操作(批量插入,批量删除)
首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...
- 【shell脚本】创建账户及删除账户,批量创建账户及批量删除账户===autoCreateUser.sh
一.字符串运算符 二.创建账户 1.提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码.如果用户不输入账户名,则提示必须输入账户名并退出脚本;如果用户不输入密码,则统一使用默认的 123456 ...
- Redis【知识点】批量删除指定Key
Redis中有删除单条数据的命令DEL但是他没有批量删除多条数据的方法,那我们怎么去批量删除多条数据呢! 第一种方式 /work/app/redis/bin/redis-cli -a youpassw ...
- jeasyUI的treegrid批量删除多行(转载)
看上去,JavaScript的变量类型,也可以分为值类型和引用类型.赋值操作中,值类型,各自独立,互不干涉:引用类型,指针而已,大家指向同一个对象. 为什么这样说呢? 我是从jeasyUI的treeg ...
- hibernate的批量删除
转自:hibernate的批量删除一般而言,hibernate的批量删除的写法有两种,一种是hibernate内置的批量删除,不过他的批量删除是将每条记录逐一生成删除语句,其效率极低,当然我们可以使用 ...
- redis 通配符 批量删除key
Redis 中 DEL指令支持多个key作为参数进行删除 但不支持通配符,无法通过通配符批量删除key,不过我们可以借助 Linux 的管道和 xargs 指令来完成这个动作. 比如要删除所有以use ...
- 批量删除git分支
本篇文章由:http://xinpure.com/bulk-delete-git-branching/ 批量删除git分支 使用 git 时候,经常会发现,不知不觉就创建了大量的分支.那么,麻烦事就来 ...
随机推荐
- [apue] 测试管道容量的一些疑问
所谓管道的容量,指不消费(读)的情况下,最大能写入的数据量.有两种方式来测试一个管道的容量: 1)使用阻塞写,每次写一个字节,并打印写入的总字节数,最后写入阻塞时,上次打印的就是管道的容量: 2)使用 ...
- SQL Server 表结构操作
一.创建表 --直接定义主外键 create table wallet( ID ) primary key, ,) not null, Name ) default '余额', Member_ID ) ...
- 《Predict Anchor Links across Social Networks via an Embedding Approach》阅读笔记
基本信息 文献:Predict Anchor Links across Social Networks via an Embedding Approach 时间:2016 期刊:IJCAI 引言 预测 ...
- java截取避免空字符丢失
1. 场景描述 数据后端是Hbase等nosql数据库,返回的数据以逗号分隔,java后端获取数据后,需要新增组装数据后再返回给前端. 2. 问题解决 2.1 问题定位 本来用的java的split进 ...
- CDQZ集训DAY7 日记
并没有考试然而心情比考试还糟糕…… 上午讲的基本就听不懂,讲课人迷之停顿.根本让人跟不上趟,声音好奇怪的说……好不容易讲到反演,Hzoi集体上线,等待装逼时刻的到来.然而,讲课人再次迷之停顿,讲一个p ...
- ~~番外:说说Python 面向对象编程~~
进击のpython Python 是支持面向对象的 很多情况下使用面向对象编程会使得代码更加容易扩展,并且可维护性更高 但是如果你写的多了或者某一对象非常复杂了,其中的一些写法会相当相当繁琐 而且我们 ...
- Web前端_微信小程序实战开发
微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1 2 点击立即注册:进入下方页面 3 4 点击小程序进入表单填写页 ...
- Java开发实例大全:3月14日练习
import java.io.FileNotFoundException; import java.io.PrintStream; import java.math.BigDecimal; impor ...
- [HNOI2015]亚瑟王[期望DP]
也许更好的阅读体验 \(\mathcal{Description}\) 给出\(n\)个技能,每个技能按输入顺序有\(p[i]\)的概率释放并造成\(d[i]\)的伤害.每轮游戏从前往后顺序查看每个技 ...
- 小代学Spring Boot之自定义Starter
想要获取更多文章可以访问我的博客 - 代码无止境. 上一篇小代同学在Spring Boot项目中配置了数据源,但是通常来讲我们访问数据库都会通过一个ORM框架,很少会直接使用JDBC来执行数据库操作的 ...