JS实现购物车01

需求

使用JS实现购物车功能01

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车01</title>
<style type="text/css">
.num{
width:20px;
}


</style>
</head>
<body>
<table align="center" border="2" id = "cart">
<tr>
<td colspan="5" align="center"><input id="add" type="button" value="添加"></td>
</tr>
<tr>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</table>

<script type="text/javascript">
document.getElementById("add").onclick = 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="-" onclick = "changNum(this);"><input type="text" class="num" value="1"><input type="button" value="+" onclick = "changNum(this);">';


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


var col5=row.insertCell();
col5.innerHTML = "<button onclick='removeRow(this);'>删除</button>";


}


function removeRow(btn){
var row = btn.parentNode.parentNode;
var index = row.rowIndex;
var table = document.getElementById("cart");
table.deleteRow(index);
}


function changNum(btn){


if(btn.value == "-"){
var count = btn.nextSibling;
//是否数量为1
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;
//找到单价
var price = btn.parentNode.previousSibling.innerHTML.substring(1);//字符串截取
//改变小计
var SubTotal = btn.previousSibling.value * price;
//填入小计
btn.parentNode.nextSibling.innerHTML = "￥" + SubTotal;
}
}


</script>
</body>
</html>

效果图
样式比较丑，不要介意哈

 

posted @ 2018-12-23 13:11  Foryourfuture  阅读(208)  评论(0)  编辑  收藏  举报