jq 简易购物车功能实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/Bootstrap4.css"/>
<form action="">
<table border="" cellspacing="" cellpadding=""width="800px">
<tr>
<th>选择</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button" id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button" class="jian">-</button>
<span>1</span>
<button type="button"id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button" id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>电车</th>
<th>9.9</th>
<th><button type="button"class="jian">-</button>
<span>1</span>
<button type="button"id="jia">+</button></th>
<th>9.9</th>
<th><button type="button"onclick="fun3(this)">删除</button></th>
</tr>
</table>
<button type="button"class="btn btn-primary all"onclick="fun()">全选</button>
<button type="button" class="btn btn-danger allno"onclick="fun1()">全不选</button>
<button type="button" class="btn btn-danger allf"onclick="fun2()">反选</button>
<button type="button" class="btn btn-danger allw"onclick="fun4()">批量删除</button>
</form>
</body>
</html>
<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//-号
$('.jian').click(function(){
var aww=$(this).next().text();
aww--;
var last=aww--<=1 ? 1 : aww--;//最终的数量
$(this).next().text(last)
var dj=$(this).parent().prev().text()
var xj=last*dj
var xj=$(this).parent().next().text(xj.toFixed(1))
})
//+号
$('#jia').click(function(){
var aqq=$(this).prev().text();
aqq++;
$(this).prev().text(aqq);//最终的数量
var dj=$(this).parent().prev().text();
var xj=aqq*dj
var xj=$(this).parent().next().text(xj.toFixed(1))
})
//批量删除
function fun4(){
var aqq=$(':checkbox:checked')
for(var i=0;i<aqq.length;i++){
aqq[i].parentNode.parentNode.remove()
}
}
//这是删除
function fun3(tag){
tag.parentNode.parentNode.remove()
}
//全选
// $(".all").click(function(){
// var check=$(":checkbox")
// $(check).each(function(k,v){
// v['checked']=true
// })
// }
//这一步是反选
function fun2(){
var add=$(":checkbox")
for(var i=0;i<add.length;i++){
if(add[i]["checked"]){
add[i]["checked"]=false
}else{
add[i]['checked']=true
}
}
}
//这一步是全选
function fun(){
var add=$(":checkbox")
for(var i=1;i<add.length;i++){
add[i]["checked"]=true
}
}
//这一步是全不选
function fun1(){
var add=$(":checkbox")
for(var i=0;i<add.length;i++){
add[i]["checked"]=false
}
}
</script>
jq 简易购物车功能实现的更多相关文章
- vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- javaweb练手项目jsp+servlet简易购物车系统
简易购物车项目 这是一个用intellij IDEA做的简易的javaweb项目,开发环境使用的jdk1.8和tomcat8以及mysql数据库. 1.项目开发准备: 创建github仓库 项目框架搭 ...
- Android 购物车功能的实现
首先,众所周知,ListView是Android最常用的控件,可以说是最简单的控件,也可以说是最复杂的控件. 作为一个Android初级开发者,可能会简单的ListView展示图文信息. 作为一个有一 ...
- 【JSP】Cookie的使用及保存中文，并用Cookie实现购物车功能
Cookie是服务器存放在客户端的一些数据,比如密码,以及你曾经访问过的一些数据. 设置Cookie //设置cookie Cookie cookie = new Cookie("TOM&q ...
- 给destoon商城的列表中和首页添加购物车功能
如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商 ...
- ASP.NET之电子商务系统开发-2(购物车功能)
一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对 ...
- jQuery 复制节点的元素实现加入到购物车功能
描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...
- 微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
随机推荐
- 有向图子图 DAG 数量
考虑 \(\tt DP\),朴素的想法是令 \(f_S\) 表示 \(S\) 这个导出子图将边定向集合构成 \(\tt DAG\) 的方案数. 转移可以考虑剥去所有入度为 \(0\) 的点,那么我们就 ...
- java - HashMap原理及实现 (转)
众所周知,HashMap是一个用于存储Key-Value键值对的集合,每一个键值对也叫做Entry.这些个键值对(Entry)分散存储在一个数组当中,这个数组就是HashMap的主干. HashMap ...
- UNIX系统上的抓包工具tcpdump常用命令说明
tcpdump 介绍 tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才 ...
- centOs7.2安装cmake
最新的3.15的安装不上 wget https://cmake.org/files/v3.5/cmake-3.5.2.tar.gz tar xvf cmake-3.5.2.tar.gz cd cmak ...
- 交换机基本原理与VRP基础及操作
交换机基本原理与VRP基础及操作 目录 交换机基本原理与VRP基础及操作 一.数据链路层 1.数据链路层的位置 2.数据链路层的功能 二.以太网(Ethernet) 1.以太网的概念 2.MAC地址( ...
- termux vim 配置 自动补全 遇到的问题
// 自动不全需要安装 pkg install proot -y // 用proot可以为手机没有root的用户来模拟一个root的环境,这里主要是经典的 Linux 文件系统布局上的模拟. //执行 ...
- spring boot 配置静态路径
一 前言 最近有个项目,需要上传一个zip文件(zip文件就是一堆的html压缩组成)的压缩文件,然后后端解压出来,用户可以预览上传好的文件. 查看资料,spring boot对静态文件,可以通过配 ...
- Solution -「NOI.AC 省选膜你赛」array
题目 题意简述 维护一个长度为 \(n\) 的序列 \(\{a_n\}\),并给出 \(q\) 个操作: 将下标为 \(x\) 的数修改为 \(y\). 给定 \(l,r,k\),求最大的 \(m ...
- Solution -「Gym 102956A」Belarusian State University
\(\mathcal{Description}\) Link. 给定两个不超过 \(2^n-1\) 次的多项式 \(A,B\),对于第 \(i\in[0,n)\) 个二进制位,定义任意一个二元 ...
- 海盗湾The Pirate Bay：每一名技术人员都应该思考的问题
海盗湾The Pirate Bay:一场互联网技术下没有硝烟的战争 写在前面: 开学啦,返校啦!祝大家新的一年,工作顺顺利利,家庭幸福美满! 正文: 假期的时候,闲来无事,看了几部纪录片,其中< ...