<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<title>购物车</title>
<style>
input{
width:25px;
}
</style>
</head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="10px">
<thead>
<th><input type='checkbox'></th>
<th>商品</th>
<th>数量</th>
<th>单价</th>
<th>状态</th>
<th>库存</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td><input type='checkbox'></td>
<td>语音电子红外体温计枪</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
69.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童防晒衣</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
109.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>小黄鸭玩具</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
9.90
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童滑板车</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
169.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>轻薄长裤</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
39.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童防蚊裤</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
29.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td>总计</td>
<td class="total"></td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(".jia").click(function () {
var num = $(this).prev().val();
if(num==20){
return;
}
$(this).prev().val(parseInt(++num));
$(this).parent().next().next().next().text(20-num)
if ($(this).parent().next().next().next().text()==0) {
$(this).parent().next().next().text('无货')
}
money ()
})
$(".jian").click(function () {
var num = $(this).next().val();
if(num==0){
return;
}
$(this).next().val(parseInt(--num));
$(this).parent().next().next().next().text(20-num)
$(this).parent().next().next().text('有货')
money ()
})
function money () {
var price=$('.jia').parent().next();
var num= $('.jia').prev();
var xiaoji = $('.xiaoji');
var sum = 0.0;
for (var i=0;i<price.length;i++) {
var price1 = parseFloat(price.eq(i).text());
var num1 = parseFloat(num.eq(i).val());
// alert(price1*num1)
xiaoji.eq(i).text((price1*num1).toFixed(2))
sum+=price1*num1;
}
$('.total').text(sum.toFixed(2));
}
</script>
</body>
</html>
JavaScript实现html购物车代码
2023-09-14 08:58:07 时间
相关文章
- javascript访问html元素的内容(2)
- javascript中通过元素id和name直接取得元素
- JavaScript实现html购物车代码
- JavaScript实现html购物车代码
- 移动端基于HTML模板和JSON数据的JavaScript交互
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- JavaScript经典代码【一】【javascript HTML控件获取值】
- [Javascript] Broadcaster + Operator + Listener pattern -- 13. Repeat When Done with a Repeat Operator
- [Javascript] Create a State Machine with a Generator
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Manipulate the DOM with the classList API
- [Javascript] Immutable opreators
- javascript: 用图片加载演示promise的应用(chrome 107.0.5304.110)
- 前端三剑客:html,css,JavaScript
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- 推荐一个markdown格式转html格式的开源JavaScript库
- 利用ES6里标准化的JavaScript proxy对象拦截SAP C4C页面的HTML div原生操作
- 1.1.4:DHTMLX Rich Text|JavaScript/HTML Rich Text Editor
- C#通过webbrowser控件与javascript交互
- web前端Javascript学习之了解JavaScript弹出框
- 零基础入门前端--JavaScript 循环结构语句
- SpreadJS JavaScript 16.0.5 Crack
- web前端框架Javascript开发基础之JavaScript作用域