js购物车

最新推荐文章于 2023-04-03 21:07:40 发布

笑-看人生

最新推荐文章于 2023-04-03 21:07:40 发布

阅读量331

点赞数 3

分类专栏： IT

本文链接：https://blog.csdn.net/qq_36936328/article/details/78276190

版权

IT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.num{
width:20px;
}
</style>
</head>
<body>
<table align="center" border="1" id="cart">
<tr align="center">
<td colspan="5"><button id="add">添加</button></td>
</tr>
<tr>
<td>商品价格</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
//添加
document.getElementById("add").οnclick=function(){
var goods_name=prompt("请输入商品名称");
if(goods_name==null){
alert("放弃添加");
return;
}
var goods_price=prompt("请输入商品价格");
if(goods_price==null){
alert("放弃添加");
return;
}
if(isNaN(goods_price)){
alert("输入格式不对");
return;
}
//往表格上绑定数据
var table=document.getElementById("cart");
var row=table.insertRow();//行
var col1=row.insertCell();//第一列

col1.innerHTML=goods_name;//商品名称
var col2=row.insertCell();

col2.innerHTML="￥"+goods_price;//商品价格
var col3=row.insertCell();
col3.innerHTML='<input type="button" value="-" οnclick="changCount(this)"/><input type="text" class="num" value="1" /><input type="button" value="+" οnclick="changCount(this)"/>';

var col4=row.insertCell();
col4.innerHTML="￥"+goods_price;

var col5=row.insertCell();
col5.innerHTML="<button οnclick='removeRow(this)'>删除</button>";
}
//删除
function removeRow(btn){
var row=btn.parentNode.parentNode;//拿到td再到tr的节点
var index=row.rowIndex;//拿到索引
var table=document.getElementById("cart");
table.deleteRow(index);//删除
}
//改变数量
function changCount(btn){
if(btn.value=="-"){
//判断数量
var count=btn.nextSibling;
if(count.value==1){
alert("不能减了");
return;
}
count.value=parseInt(count.value)-1;

//找单价
var price=btn.parentNode.previousSibling.innerHTML.substring(1);

//改变小计
var subTotal=count.value*price;
//填入小计
btn.parentNode.nextSibling.innerHTML="￥"+subTotal;
}else if(btn.value=="+"){
//控制文本框的数量
//改变数量
btn.previousSibling.value =parseInt(btn.previousSibling.value)+1;

//找单价 +号前面的
//注意单价用前面的会覆盖 goods_price保留的是最后一个去掉前面的字符
var price=btn.parentNode.previousSibling.innerHTML.substring(1);

//改变小计
var subTotal=btn.previousSibling.value*price;
//填入小计
btn.parentNode.nextSibling.innerHTML="￥"+subTotal;
}
}
</script>
</body>
</html>