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的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
随机推荐
- 009-2010网络最热的 嵌入式学习|ARM|Linux|wince|ucos|经典资料与实例分析
前段时间做了一个关于ARM9 2440资料的汇总帖,很高兴看到21ic和CSDN等论坛朋友们的支持和鼓励.当年学单片机的时候datasheet和学习资料基本都是在论坛上找到的,也遇到很多好心的高手朋友 ...
- python经典面试算法题1.3：如何计算两个单链表所代表的数之和
本题目摘自<Python程序员面试算法宝典>,我会每天做一道这本书上的题目,并分享出来,统一放在我博客内,收集在一个分类中. 1.2 如何实现链表的逆序 [华为笔试题] 难度系数:⭐⭐⭐ ...
- jquery判断手指滑动方向
jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...
- ctf misc 学习总结大合集
0x00 ext3 linux挂载光盘,可用7zip解压或者notepad搜flag,base64解码放到kali挂载到/mnt/目录 mount 630a886233764ec2a63f305f31 ...
- 关于Jvm的见解（一）
Jvm组成结构 硬件体系(如Intel体系.spac等)——>操作系统(如Windows.Linux等)——>Java Virtual Machine 所以虚拟机与硬件系统并没有直接的交 ...
- nuxt.js 注册全局组件
plugins 属性配置 src: String (文件的路径) ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入. 根目录找到 nuxt.confi ...
- 回声消除中的LMS和NLMS算法与MATLAB实现
自适应滤波是数字信号处理的核心技术之一,在科学和工业上有着广泛的应用领域.自适应滤波技术应用广泛,包括回波抵消.自适应均衡.自适应噪声抵消和自适应波束形成.回声对消是当今通信系统中普遍存在的现象.声回 ...
- 类加载器 - ClassLoader详解
获得ClassLoader的途径 获得当前类的ClassLoader clazz.getClassLoader() 获得当前线程上下文的ClassLoader Thread.currentThread ...
- 突破至暗时刻，HCIE-RS的6个月成就之路
我是今年四月份报的HCIE培训,到考完面试总共六个月的时间,对于HCIE整个考试的流程来说,六个月的时间不短,但也不是很长.尤其是面试,需要花费大量的时间和精力,下面我就把我整个备考历程做个简单的分享 ...
- AE ArcEngine10.4+vs2012安装配置
准备内容 安装环境:win10*64位专业版,ArcGIS_Desktop_1041_151727,C#语言环境,visual studio2012 安装文件:ArcGIS_Engine_1041_1 ...