jq 版本购物车
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
fieldset{
width: 800px;
/*text-align: center;*/
margin: auto;
}
tr{
height: 30px;
text-align: center;
}
#aaaaa{
margin-right:540px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<fieldset id="">
<legend>购物车</legend>
<div id="">
商品名称:<input type="text" id="goodsName" value="test"/>
商品单价:<input type="text" id="goodsPrice" οnblur="verNum(this)" value="12"/>
商品数量:<input type="text" id="goodsNum" value="12"/>
<button id="addGoods">加入购物车</button>
</div>
<table width="800px" border="1" >
<thead>
<tr>
<th>全选 <input id="chkAll" type="checkbox" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<button id="aaaaa" >删除选中商品</button>
总价：<span id="zongjia">0</span>
</fieldset>
<script>
$(function(){
//
let goods;
// 获取外部的json
$.getJSON("js/2.js",function(data){
// json文件里面的数据
// $.parseJSON() // JSON字符串转化为json对象 == JSON.pasrse()
// JSON。stringify() json对象=>JSON字符串
goods=data;
//alert(goods);
$.each(goods,function(i,obj){
let name=obj.goodname;
let price=obj.goodprice;
let num=obj.num;
addTr(name,price,num);// 写一次 只写一次
})
})
$("#addGoods").click(function(){
if(!verNum()){
return;
}
// 添加商品
// 取出商品的信息
let goodname=$("#goodsName").val();
let goodprice=$("#goodsPrice").val();// 文本类型 ‘90’
let num=$("#goodsNum").val();
// 取出 tbody里面的class=name的值 跟当前的goodname进行比较 如果一样
let names=$(".name");// td
let flage=false;// 不重复
let obj;//
names.each(function(i,obj1){
if($(obj1).text()==goodname){
flage=true;
obj=$(obj1).parent();
}
})
// 名字重复的时候 flage=true
if(flage==true){
// 修改数量 table表格里面的数据加上新输入的数据
//alert(obj.children[3].children[1].value);// +input -
let num1=Number(obj.children().eq(3).children().eq(1).val());//
let num2=Number(num);
let num3=num1+num2;
// 新数据 添加到table里面
//obj.children[3].children[1].value=num3;
// 修改一下总价格 价格*数量
let price=Number(obj.children().eq(2).text());
let totalPrice=price*num3;
obj.children().eq(4).text(totalPrice);
obj.children().eq(3).children().eq(1).val(num3);
}else{
// 直接追加一行
addTr(goodname,goodprice,num);
}
zj();
})
// 给删除按钮绑定一个click事件
// jquery对象 必须从html的静态页面里面去找
$("#tbody").on("click",".sc>input",function(){
// 删除当前的行
$(this).parent().parent().remove();
zj();
})
// 每行的第一个复选框
$("#tbody").on("click",".ck",function(){
// 删除当前的行
// 所有的复选框
let cks=$(".ck");
let j=$(".ck:checked").length;// 找到class=ck的状态是选中的
if(j==cks.length){
// 全部选中
$("#chkAll").prop("checked",true);
}else{
$("#chkAll").prop("checked",false);
}
zj();
})
// 全选
$("#chkAll").click(function(){
checkAll();
})
// 删除选中的商品
$("#aaaaa").click(function(){
let cks=$(".ck");
// [1,2,3,4]
cks.each(function(){
let status=$(this).prop("checked");// 选中的状态
if(status){
// 删除
$(this).parent().parent().remove();
}
})
if($("#chkAll").prop("checked")){
$("#chkAll").prop("checked",false);
}
zj();
})
// + -
$("#tbody").on("click",".sl>button",function(){
// 如果buttton内容 + -
let con=$(this).text();
console.log(con);
let newnum;
if(con=="+"){
let oldnum=$(this).next().val();
newnum=Number(oldnum)+1;
$(this).next().val(newnum);
// 修改价格 数量
let price=$(this).parent().prev().text();
//alert(price);
//总价格
let totalprice=newnum*Number(price);
//
$(this).parent().next().text(totalprice);
zj();
}else{
// 值 12 下一个元素
// 当前的按钮的下一个元素的文本的值 12
//alert(obj.nextElementSibling.innerText);
let oldnum=$(this).prev().val();
if(oldnum<=1){
//alert("已经是最小值了不能再减了");
$(this).parent().parent().remove();
return;// 不走
}
newnum=Number(oldnum)-1;
$(this).prev().val(newnum);
}
let price=$(this).parent().prev().text();
//alert(price);
//总价格
let totalprice=newnum*Number(price);
//
$(this).parent().next().text(totalprice);
zj();
});
})
function verNum(obj){
let reg=/^[1-9]\d*$/;
if(!reg.test($(obj).val())){
$(obj).focus();
return false;
}
return true;
}
// 添加一行
function addTr(goodname,goodprice,num){
//
let trs=$("<tr></tr>");// <tr></tr>
// 获取全选的 复选框的状态
let status=$("#chkAll").prop("checked");
// 拼接第一个td
let tr="";
if(status){
tr+="<td><input type='checkbox' class='ck' checked='true' /></td>";
}else{
tr+="<td><input type='checkbox' class='ck' /></td>";
}
// 第二个td 商品的名字
tr+="<td class='name'>"+goodname+"</td>";
// 第三个td 商品的价格
tr+="<td class='price'>"+goodprice+"</td>";
// 第四个td 商品的数量
//tr+="<td ><button οnclick='btnjia()'>+</button><input type='text' value='"+num+"'/><button οnclick='btnjian()'>-</button></td>";
tr+= "<td class='sl'><button >+</button><input type='text' value='"+num+"'/><button >-</button></td>";
// 价格*数量 第五个td 商品的总价
tr+="<td class='totalprice'>"+Number(goodprice)*Number(num)+"</td>";
// 操作
tr+="<td class='sc'><input type='button' value='删除'/></td>";
trs.html(tr);
$("#tbody").append(trs);//
//alert(tbody.innerHTML);
checkAll();
}
// 全选
function checkAll(){
// 获取复选框的 选中的状态
let status=$("#chkAll").prop("checked");
let cks=$(".ck").prop("checked",status);
zj();
}
/**
* 计算总价
* 选中的复选框对应的商品的总价 进行累加
*/
function zj(){
let sum =0;// 总价
let cks=$(".ck");
cks.each(function(){
let status=$(this).prop("checked");
if(status==true){
// 选中 获取对应总价 tr
let trnode=$(this).parent().parent();
// 价格
let price=trnode.children().eq(4).text();
sum+=Number(price);
}
})
$("#zongjia").text(sum+"元");
}
</script>
</body>
</html>
具体js包 2.js代码如下：
[{
"goodname": "test1",
"goodprice": 12,
"num": 10
},
{
"goodname": "test2",
"goodprice": 13,
"num": 14
},
{
"goodname": "test3",
"goodprice": 2,
"num": 10
}
]
代码如上，大家自取之
购物车效果如下：
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
