jQuery实现类似于购物车操作
先看页面的代码，后面会详细写每一个操作的实现。
<html>
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
tr{
height: 40px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
<script type="text/javascript" src="js/gwc.js" ></script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
<input type="button" id="fx" value="反选" />
<input type="button" id="addRow" value="新增一行" />
<input type="button" id="delRow" value="删除行" />
<input type="button" id="copyRow" value="复制行" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
<td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr id="">
<td><input type="checkbox" name="chk" id="" value="2"/ ></td>
<td>《Java编程之道》</td>
<td>wollo</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改数量" οnclick="chnum(this)" />
<input type="button" name="" id="" value="删除" οnclick="re(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《Python和我的故事》</td>
<td>赵老师</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改数量" οnclick="chnum(this)"/>
<input type="button" name="" id="" value="删除" οnclick="re(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《web开发详解》</td>
<td>张老师</td>
<td>30</td>
<td>
<input type="button" name="aa" id="" value="修改数量" οnclick="chnum(this)"/>
<input type="button" name="" id="" value="删除" οnclick="re(this)"/>
</td>
</tr>
</table>
</body>
</html>整体样式：
1.全选操作：
/*实现全选功能*/
$("#chks").click(function(){
var flag=$(this).prop("checked");
$("input[name=chk]").prop("checked",flag);
})
$("input[name=chk]").click(function(){
var flag=true;
var chk=$("input[name=chk]");
chk.each(function(){
if (!$(this).prop("checked")) {
flag=false;
}
})
$("#chks").prop("checked",flag);
})这里我们用this代表我们选中的那个表单，然后去获取checked属性，然后直接去用获取名称的方式得到我们需要的表单，因为prop的返回值是Boolean，所以我们将其checked的属性赋值为flag。这仅仅只是将全选框的功能实现了，并没有实习后续的操作，因此我们继续将，表单全部选中的情况下，全选框也会变成选中的这一效果实现。我们用名称的范式去获取下面的表单，并创建和设置flag的值为true，.each的方法是表是遍历的意思。我们得到的每一个表单都需要去检测，当全部被勾选，执行下一步将全选框的checked属性赋值为flag。
反选操作：
/*实现反选功能*/
$("#fx").click(function(){
var chx=$("input[name=chk]");
chx.each(function(){
//获取多选框的初始状态
var flag=$(this).prop("checked");
$(this).prop("checked",!flag);
$("#chks").prop("checked",false);
})
})反选功能我们只需要得到下面的表单，并将它们的勾选框取反。
新增一行：
/*新增一行*/
$("#addRow").click(function(){
var addone=$("#ta");
addone.append(
'<tr id="">'+
'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
'<td>《Java编程之道》</td>'+
'<td>wollo</td>'+'<td>10</td>'+
'<td>'+
'<input type="button" name="aa" id="" value="修改数量" οnclick="chnum(this)" /> '+
'<input type="button" name="" id="" value="删除" οnclick="re(this)"/>'+
'</td>'+
'</tr>');
})这里我们是以第一行的表单为例，去新增的。用到了append方法，注意是在哪一部分去添加。我们获取的是table，直接在table表的最后面一行加。如果不清楚append方法，可以去append方法看看。
删除行：
/*删除行*/
$("#delRow").click(function(){
var delRow=$("input[name=chk]:checked");
if (delRow.length==0) {
alert("至少选择一行!!")
} else{
delRow.parent().parent().remove();
}
})由于删除行我们是针对整体进行操作的，因此我们需要表单是在被勾选的情况下才能去进行删除行操作。删除行我们需要得到他父类的父类，然后去删除整个tr
复制行操作：
/*复制行*/
$("#copyRow").click(function(){
var copyRow=$("input[name=chk]:checked");
if (copyRow.length==0) {
alert("至少选择一行!!")
} else{
//复制(clone的方法)
var tr=copyRow.parent().parent().clone();
//粘贴
$("#ta").append(tr);
}
})和删除行一样，我们需要在表单是在被勾选的情况下才能去进行复制行操作。这里我们用到了clone的方法。复制分为俩步，一步是clone，一步是粘贴，也可以理解陈追加（append）。
由于修改数量，以及删除，修改数量之后光标消失事件都是会有表单是在复制行之后再去进行操作，一次我们这三种方法就用js函数进行操作：
/*修改数量*/
function chnum(th){
var pre=$(th).parent().parent();
pre.children().eq(3).html("<input type='number' οnblur='xg(this)'/> ");
}
/*修改数量之后，失去焦点*/
function xg(th){
var pre=$(th).parent().parent();
pre.children().eq(3).html(th.value);
}
/*删除操作*/
function re(th){
var pre=$(th).parent().parent();
pre.remove();
}
可以看得出来，三种方法类似，修改数量先更改表单类型，然后再去恢复。删除直接得到tr，然后直接删除。
gwc.js完整代码：
$(function(){
/*实现全选功能*/
$("#chks").click(function(){
var flag=$(this).prop("checked");
$("input[name=chk]").prop("checked",flag);
})
$("input[name=chk]").click(function(){
var flag=true;
var chk=$("input[name=chk]");
chk.each(function(){
if (!$(this).prop("checked")) {
flag=false;
}
})
$("#chks").prop("checked",flag);
})
/*实现反选功能*/
$("#fx").click(function(){
var chx=$("input[name=chk]");
chx.each(function(){
//获取多选框的初始状态
var flag=$(this).prop("checked");
$(this).prop("checked",!flag);
$("#chks").prop("checked",false);
})
})
/*新增一行*/
$("#addRow").click(function(){
var addone=$("#ta");
addone.append(
'<tr id="">'+
'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
'<td>《Java编程之道》</td>'+
'<td>wollo</td>'+'<td>10</td>'+
'<td>'+
'<input type="button" name="aa" id="" value="修改数量" οnclick="chnum(this)" /> '+
'<input type="button" name="" id="" value="删除" οnclick="re(this)"/>'+
'</td>'+
'</tr>');
})
/*删除行*/
$("#delRow").click(function(){
var delRow=$("input[name=chk]:checked");
if (delRow.length==0) {
alert("至少选择一行!!")
} else{
delRow.parent().parent().remove();
}
})
/*复制行*/
$("#copyRow").click(function(){
var copyRow=$("input[name=chk]:checked");
if (copyRow.length==0) {
alert("至少选择一行!!")
} else{
//复制(clone的方法)
var tr=copyRow.parent().parent().clone();
//粘贴
$("#ta").append(tr);
}
})
})
/*修改数量*/
function chnum(th){
var pre=$(th).parent().parent();
pre.children().eq(3).html("<input type='number' οnblur='xg(this)'/> ");
}
/*修改数量之后，失去焦点*/
function xg(th){
var pre=$(th).parent().parent();
pre.children().eq(3).html(th.value);
}
/*删除操作*/
function re(th){
var pre=$(th).parent().parent();
pre.remove();
}
效果：
jQuery实现类似于购物车操作的更多相关文章
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- jQuery -- DOM节点的操作
DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...
- jquery.cookie中的操作
http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...
- 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用
这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
随机推荐
- ARP协议字段解读
Hardware type : 硬件类型,识别链路层协议 Protocol type : 协议类型,标识网络层协议 Hardware size : 硬件地址大小,标识MAC地址长度,这里是6个字节(4 ...
- Pandas进阶笔记 （一） Groupby 重难点总结
如果Pandas只是能把一些数据变成 dataframe 这样优美的格式,那么Pandas绝不会成为叱咤风云的数据分析中心组件.因为在数据分析过程中,描述数据是通过一些列的统计指标实现的,分析结果也需 ...
- Java虚拟机-字节码指令
目录 字节码指令 字节码与数据类型 加载和存储指令 运算指令 类型转换指令 对象创建与访问指令 操作数栈管理指令 控制转移指令 方法调用和返回指令 异常处理指令 同步指令 字节码指令 Java虚拟机的 ...
- 【R语言学习笔记】 Day1 CART 逻辑回归、分类树以及随机森林的应用及对比
1. 目的:根据人口普查数据来预测收入(预测每个个体年收入是否超过$50,000) 2. 数据来源:1994年美国人口普查数据,数据中共含31978个观测值,每个观测值代表一个个体 3. 变量介绍: ...
- Worktile正式发布全新研发产品！
经过近一年时间的打磨,Worktile研发产品正式发布啦!和以往Worktile版本升级不同的是,这是一个全新的产品形态,目前已上线 Agile(敏捷开发).Pipe(持续交付).Testhub(测试 ...
- nyoj 655-光棍的yy (python, 未A)
655-光棍的yy 内存限制:64MB 时间限制:1000ms 特判: No 通过数:4 提交数:7 难度:2 题目描述: yy经常遇见一个奇怪的事情,每当他看时间的时候总会看见11:11,这个很纠结 ...
- 关键路径法(Critical Path Method, CPM)
1.活动节点描述及计算公式 通过分析项目过程中哪个活动序列进度安排的总时差最少来预测项目工期的网络分析. 产生目的:为了解决,在庞大而复杂的项目中,如何合理而有效地组织人力.物力和财力,使之在有限资源 ...
- 在阿里云服务器中配置JDK、tomcat、mysql
阿里云服务器搭建配置 linux命令:参考:https://www.cnblogs.com/itdansan/p/8545187.html cat 文件名: 查看文件内容 ctrl+D : 退出查看 ...
- Spring中常见的设计模式——工厂模式
一.简单工厂模式 简单工厂模式(Simple Factory Pattern)由一个工厂对象决定创建哪一种产品类的实例,简单工厂模式适用于工厂类负责创建对象较少的情况,且客户端只需要传入工厂类的参数, ...
- 详解在Linux系统中安装JDK
本文以在CentOS 7.6中安装JDK8为例进行安装,其他系统和版本都是大同小异的. 下载 进入Oracle官方网站的下载页面. 首先,接受许可协议,如下图: 然后,根据Linux系统的位数选择要下 ...