5.4.2 js实现的购物车 有添加商品 删除商品 计算价格 调整数量等
作者：互联网
效果图：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<fieldset id="">
<legend>购物车</legend>
商品名称：<input type="text" name="" id="goodsName" value="" />
商品价格：<input type="text" name="" id="goodsPrice" value="" />
商品数量：<input type="text" name="" id="goodsNum" value="" /><br>
<input type="button" name="" id="" value="添加" onclick="addgoods()" />
<table border="" cellspacing="" cellpadding="">
<tr>
<th>选择<input type="checkbox" name="" id="allCheck" value="" onclick="allCheckbtn()" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
<tbody id="goodsList">
</tbody>
</table>
<input type="button" name="" id="" value="删除选中" onclick="delAll()" />
<span id="totalprice">
</span>
</fieldset>
<script type="text/javascript">
function add() {
let str = "";
str += "<td><input type='checkbox' class='checkTd' οnclick='checkone()'></td>";
str += "<td class='goodsNameTr'>" + goodsName.value + "</td><td>" + goodsPrice.value + "</td>"
str += "<td><input type='button' value='+' οnclick='addbtn(this)'><input type='number' value='" + goodsNum
.value + "'><input type='button' value='-' οnclick='lowerbtn(this)'></td>"
str += "<td>" + Number(goodsPrice.value) * +Number(goodsNum.value) + "</td>"
str += "<td><input type='button' value='删除' οnclick='delbtn(this)'></td>";
let trNew = document.createElement("tr");
trNew.innerHTML += str;
goodsList.appendChild(trNew);
totalpricebtn();
}
//判断添加
function addgoods() {
let goodsNameTrs = document.getElementsByClassName("goodsNameTr");
if (goodsNameTrs.length == 0) {
add();
} else {
let status = false;
for (var i = 0; i < goodsNameTrs.length; i++) {
if (goodsNameTrs[i].innerText == goodsName.value) {
status = true;
goodsNameTrs[i].parentNode.children[3].children[1].value = Number(goodsNameTrs[i].parentNode
.children[3].children[1].value) + Number(goodsNum.value);
goodsNameTrs[i].parentNode.children[4].innerHTML = goodsNameTrs[i].parentNode.children[2].innerText *
goodsNameTrs[i].parentNode.children[3].children[1].value
}
}
if (!status) {
add();
}
}
}
//添加数量
function addbtn(obj) {
obj.nextElementSibling.value++;
obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
.nextElementSibling.value;
totalpricebtn();
}
//减少数量
function lowerbtn(obj) {
obj.previousElementSibling.value--;
obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
.previousElementSibling.value;
totalpricebtn();
}
//删除
function delbtn(obj) {
obj.parentNode.parentNode.remove();
totalpricebtn();
}
//全选择
function allCheckbtn() {
let checkTds = document.getElementsByClassName("checkTd");
let status = allCheck.checked;
for (var i = 0; i < checkTds.length; i++) {
if (allCheck.checked) {
checkTds[i].checked = status;
} else {
checkTds[i].checked = status;
}
}
totalpricebtn();
}
//反选
function checkone() {
let checkTds = document.getElementsByClassName("checkTd");
let status = true;
for (var i = 0; i < checkTds.length; i++) {
if(!checkTds[i].checked){
status = false;
break;
}
}
if(status){
allCheck.checked = true;
}else{
allCheck.checked = false;
}
totalpricebtn();
}
//删除选中
function delAll(){
let checkTds = document.getElementsByClassName("checkTd");
for (var i = checkTds.length-1; i >= 0; i--) {
if(checkTds[i].checked){
checkTds[i].parentNode.parentNode.remove();
}
}
totalpricebtn();
}
//总价
function totalpricebtn(){
let checkTds = document.getElementsByClassName("checkTd");
let num = 0;
for (var i = 0; i < checkTds.length; i++) {
if(checkTds[i].checked){
num += Number(checkTds[i].parentNode.parentNode.children[4].innerText);
}
}
totalprice.innerText = "总价格"+num+"元";
}
</script>
</body>
</html>
标签：5.4,checkTds,value,js,let,parentNode,checked,obj,购物车 来源： https://blog.csdn.net/wang121213145/article/details/122094575