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的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
随机推荐
- 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作
一.各个组件的功能描述: Docker 是一个开源的应用容器引擎. Jenkis 是一个开源自动化服务器. (1).负责监控gitlab代码.gitlab中配置文件的变动: (2).负责执行镜像文件的 ...
- ctf misc 学习总结大合集
0x00 ext3 linux挂载光盘,可用7zip解压或者notepad搜flag,base64解码放到kali挂载到/mnt/目录 mount 630a886233764ec2a63f305f31 ...
- 痞子衡嵌入式：串行EEPROM接口事实标准及SPI EEPROM简介
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是EEPROM接口标准及SPI EEPROM. 痞子衡之前写过一篇文章 <SLC Parallel NOR简介>,介绍过并行N ...
- 关于设备与canvas画不出来的解决办法
连续四天解决一个在三星手机上面画canvas的倒计时饼图不出来的问题,困惑了很久,用了很多办法,甚至重写了那个方法,还是没有解决,大神给的思路是给父级加 "overflow: visible ...
- C# 获取系统当前登录用户(管理员身份运行同样有效)
今天学习下怎么用.Net获取系统当前登陆用户名,因为目前网上基本只有最简单的方式,但以管理员身份运行的话就会获取不到,所以特整理一下作为分享,最后附带参考文档,方便深究的童鞋继续学习. ======= ...
- 生信 - 从repeatmasker传送门过来的 blast
以前有的是非完整时间写的博客,抽时间需要统一整理一下. 今天在重新装repeatmasker. 整个过程是这样的,有关联的事情有两个. 1. 装repeatmasker需要各种Prerequisite ...
- CSS如何修改tr边框属性
有很多时候,我们都要自定义为表格合并边框,这个只要 table{ border-collapse:collapse; } 就可以了 参数: separate 默认值.边框会被分开.不会忽略border ...
- ArcGIS API For Javascript ：如何动态生成 token 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
- Docker从入门到掉坑(三)：容器太多，操作好麻烦
前边的两篇文章里面,我们讲解了基于docker来部署基础的SpringBoot容器,如果阅读本文之前没有相关基础的话,可以回看之前的教程. Docker 从入门到掉坑 Docker从入门到掉坑(二): ...
- go语言学习笔记（二）
整数 有符号整数 int8 int16 int32 int64 无符号整数 uin8 uin16 uin32 uin64 无符号整数 uintptr可以进行运算这点很重要请了解unsafe包,大小不明 ...