input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...
2024-04-15 23:18:57
今天实现了购物车的一些功能，包括删除添加，复制，修改值，全选，反选等。
以下是代码跟配图：
js代码部分：通过各种事件实现了按钮的具体功能
$(function(){//全选功能$("#chks").click(function(){var flag = $("#chks").prop("checked");$("input[name=chk]").prop("checked",flag);})//单选全选中， 全选框自动打勾$(document).on('click',"input[name=chk]",function(){var flag = true;$("input[name=chk]").each(function(){if(!$(this).prop("checked")){return flag=false;}})$("#chks").prop("checked",flag);})//反选功能$("#fx").click(function(){var flag =true;var triggle = true;$("input[name=chk]").each(function(){//保存 勾选状态flag=$(this).prop("checked")//将勾选状态 取反$(this).prop("checked",!flag);// 勾选状态被取反， 所以 全选的情况被改成了选不选情况， 所以当被选中flag=true时 全选按钮应该falseif(flag){triggle=false;}})$("#chks").prop("checked",triggle);})//新增行功能$("#addRow").click(function(){var ta = $("#ta");ta.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="修改数量" /> '+'<input type="button" name="dd" id="" value="删除" />'+'</td>'+'</tr>');})//删除功能$("#delRow").click(function(){//checked属性只有一个值 checked（被选中）即有这个属性就是被选中状态var del = $("input[name=chk]:checked");if(del.length==0){alert("至少选择一行");}else{//底层自动遍历每个元素 进行操作del.parent().parent().remove();}})//复制行$("#copyRow").click(function(){var copy = $("input[name=chk]:checked");if(copy.length==0){alert("至少选择一行");}else{//复制var tr = copy.parent().parent().clone();//黏贴$("#ta").append(tr);}})//修改数量$(document).on('click',"input[name=aa]",function(){var trNum = $(this).parent().prev();trNum.html("<input type='text' size='3px' name='ipNum' onblur='bu1(this)' />");})//删除操作$(document).on('click',"input[name=dd]",function(){$(this).parent().parent().remove();})})//修改数量子方法， 失焦事件，获得值
function bu1(th){var val = $(th).val();if(""!=val){$(th).parent().html(val);}else{$(th).parent().html('0');}}
这是HTML页面的样板：
<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.9.1.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="修改数量" /><input type="button" name="dd" id="" value="删除" /></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="修改数量" /><input type="button" name="dd" id="" value="删除" /></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="修改数量" /><input type="button" name="dd" id="" value="删除" /></td></tr> </table></body>
</html>
点击全选：
反选：
新增一行：
删除行：
input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...相关推荐
- java table修改指定行_（变强、变秃）Java从零开始之JQuery购物车功能实操
今天实现了购物车的一些功能,包括删除添加,复制,修改值,全选,反选等. 以下是代码跟配图: js代码部分:通过各种事件实现了按钮的具体功能 $ 这是HTML页面的样板: < 页面效果 点击全选: ...
- 寻找亚马逊测评师邮箱_美国及欧盟亚马逊产品外观专利查询步骤实操教程（已验证）...
亚马逊产品外观专利防不胜防:美国及欧盟外观专利查询步骤实操教程(已验证) 欧洲 https://www.tmdn.org/tmdsview-web/dsview-logo-white.15c95da2 ...
- h5可以获取本机手机号码么_人人都可写代码-H5零基础编程-登录界面实操05
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个登录界面的H5. 这是要实现的H5登录界面展示效果,手机号+验证码的登录方式:下面就是教大家如何制作的步骤: 1.在 ...
- cam350怎么看顶层_厉害的人是怎么分析问题的？（实操干货）
"经常做一个方案,几十页PPT还没把问题讲清楚,老板一个问题就貌似发现了关键,这到底是一种怎么样的思维方式?" 我在职场这么多年,也遇到过很多次这样的问题. 在我初入职场时,经领导 ...
- datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-首页界面实操06...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个首页界面的H5. 这是要实现的H5首页界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目smart ...
- java监听所有端口_(变强、变秃)Java从零开始之zookeeper安装
Zookeeper安装 1.安装单机版 1.安装linux.jdk 2.配置变量环境:export JAVA_HOME=/usr/local/jdk export CLASSPATH=.:$JAVA_ ...
- asp单元格合并后宽度没有合并_宅在家里跟着大牛从零开始学excel第五课-合并，边框，列宽行高...
接着上一课,我们制作的课程表,有人说了不好看,确实,我们就来补充和美化一下.首先我们要更改的就是字体,字体改成下图,字体大小选为18,样子就好看了很多了. 仔细看上图,还却一点东西,那就是左边没有分上 ...
- 翰文付费打印后还有水印吗_免费开通小程序商城？！有支付功能吗？
一说可以免费开通小程序商城,好多人的第一反应就是:「你们的免费小程序商城有支付功能吗?」 忍不住反问:「为什么会没有?」 通过互联网多年的训练,大家好像发现了这些规律: 免费小程序=没有支付功能? 免 ...
- 微信小程序 界面禁止下拉 左右滑动_微信 iOS 版更新，带来了这些新功能
果粉俱乐部 让科技更好的服务生活 点击上方「蓝字」加入我们 iOS 13 正式版系统即将到来,第三方应用已经开始陆续更新适配,微信在 9 月 17 号也推出了新的 iOS 版 7.0.7 版本更新. ...
最新文章
- 'datetime.datetime' object is not callable
- pythonurllib模块-python模块之urllib
- Java当中的HashSet
- oracleI基础入门(8)--table--MINUS
- 电子商务应用课程知识整理 第二章-电子商务相关知识与技术
- 【Pytorch神经网络理论篇】 21 信息熵与互信息：联合熵+条件熵+交叉熵+相对熵/KL散度/信息散度+JS散度
- 奇数求和（信息学奥赛一本通-T1065）
- 虚拟机和linux系统整理？？
- Atom飞行手册翻译： 4.3 作用域设置、作用域和作用域描述符
- 有这几个编程利器网站，再也不愁学习
- 阿呆做网站(1)--基本功能
- 酱油瓶上有两个字很重要，一直都被忽略了，以后看准再买！
- 【马哥教育视频】cacti入门及进阶[已更新至第四段]
- 静态页面 调用php数据,静态html页面如何更新点击数
- 机器学习入门（二）：工具与框架的选择
- execute、executeUpdate、executeQuery三者的区别
- c语言关键字及其含义,C语言关键字解析
- 黑客之门(hacker's door) 1.2 版
- 豆瓣fm android,豆瓣 FM
- JavaScript高级—正则表达式（正则表达式在 JavaScript 中的使用、正则表达式中的特殊字符、正则表达式中的替换）