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的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
随机推荐
- inux下vi命令大全
分类: LINUX 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文 ...
- element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...
- Conda/Miniconda/Anaconda 常用命令整理及介绍
作者:HELO 出处:http://www.cnblogs.com/HELO-K 欢迎转载, 转载时请保留此声明, 谢谢! 在这里整理一份全一点的 Conda 常用命令, 方便大家日常使用时参考, 一 ...
- C# IV: 数据库基础操作2
需上一篇C# III:数据库基础操作 另外一个经常碰到的数据库操作是,单次执行多个SQL语句,譬如,一次性插入多条数据. 方法一,拼凑长SQL语句 拼凑长SQL语句实际上是String的操作.如下示例 ...
- 如何基于 PHP-X 快速开发一个 PHP 扩展
0x01 起步 PHP-X本身基于C++11开发,使用cmake进行编译配置.首先,你需要确定所有依赖项已安装好.包括: gcc-4.8 或更高版本 PHP7.0 或更高版本,需要php7-dev 开 ...
- [LC]141题 Linked List Cycle （环形链表）（链表）
①中文题目 给定一个链表,判断链表中是否有环. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 -1,则在该链表中没有环. 示例 ...
- 别翻了，这篇文章就是要让你入门java多线程！
目录 1. 理解线程与进程 2.理解并行和并发 3.特殊的一个单线程:主线程(Main线程) 4. 创建多线程的四种方式 5.使用匿名内部类方式创建线程 6.线程安全问题 7.解决线程安全问题:线程同 ...
- KDevelop
ctags+vim还是太累了,还是使用IDE好,尤其是c++模板.KDevelop就不错,符号智能推导以及cmake项目管理和配置,还是挺好用的. Android端的ndk开发使用Android St ...
- AV时间戳dts,pts。从ffmpeg解码过程看过来。
解码过程中,dts由媒体流读入的包推动(解码包中的dts标记),dts在前进.pts是在dts前进到某处(截点)而进行动作的标记. 物理时间自然流逝,dts可以被控制同步与物理时间同一脚步节奏,也可以 ...
- sql注入基本原理
SQL注入基本原理 WEB技术发展日新月异,但是徒手拼SQL的传统手艺还是受相当多的开发者亲睐.毕竟相比于再去学习一套复杂的ORM规则,手拼更说方便,直观.通常自己拼SQL的人,应该是有听说过SQL注 ...