需求
使用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;//是否数量为1if(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>效果图
样式比较丑，不要介意哈
JS实现购物车01
原文地址：https://www.cnblogs.com/yidaixiaohui/p/10163991.html