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的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
随机推荐
- 读《MySQL必知必会》我学到了什么？
前言 最近在写项目的时候发现自己的SQL基本功有些薄弱,遂上知乎查询MYSQL关键字,期望得到某些高赞答案的指点,于是乎发现了 https://www.zhihu.com/question/34840 ...
- CentOS 6.4 configure error的解决方法
资料来源:http://blog.sina.com.cn/s/blog_62426dcf0100f2rz.html 虽然上面的文章是针对centOS 5写的,不过经测试也可用于centOS6.4. 自 ...
- 《计算机网络 自顶向下方法》 第2章 应用层 Part2
域名.主机名? 从范围上看: 域名的范围比主机名大 一个域名下通常有多个主机名 从组成上看: 主机名 = 服务器名(或计算机名) + 域名 举例说明: baidu.com 是百度的域名 www.b ...
- git回退之git reset
参考 https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E9%87%8D%E7%BD%AE%E6%8F%AD%E5%AF%86 https: ...
- nyoj 18-The Triangle(动态规划)
18-The Triangle 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:5 submit:5 题目描述: 7 3 8 8 1 0 2 7 4 ...
- 领扣（LeetCode）寻找峰值 个人题解
峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下,返回任何一个峰值所在位 ...
- 如何在后台封装el-tree所需要的数据格式
背景 最近遇到了一个分层级展示指标的需求,前端使用el-tree树形组件,要求按官方文档的格式提供数据. 数据格式: id: 1, label: '一级 1', children: id: 4, la ...
- ThreadLocal线程局部变量的使用
ThreadLocal: 线程局部变量 一).ThreadLocal的引入 用途:是解决多线程间并发访问的方案,不是解决数据共享的方案. 特点:每个线程提供变量的独立副本,所有的线程使用同一个Thre ...
- 线程同步&线程池
线程同步&线程池 线程同步 线程不同步会出现的问题: 当多个线程操作同一资源时,会出现重复操作和和操作不存在的资源的问题,为了规避这一问题就需要线程的同步操作来实现资源的共同使用. 线程同步: ...
- 以太网驱动的流程浅析(一)-Ifconfig主要流程【原创】
以太网驱动的流程浅析(一)-Ifconfig主要流程 Author:张昺华 Email:920052390@qq.com Time:2019年3月23日星期六 此文也在我的个人公众号以及<Lin ...