增删商品计算价格
购物车
| 名称 | 价格 | 数量 | 小计 | 操作 | |
|---|---|---|---|---|---|
| 《JavaScript全面解毒，解不掉就毒死》 | 18.0 | 18.0 | |||
| 《JavaScript全面解毒，解不掉就毒死》 | 18.0 | 18.0 | |||
| 《JavaScript全面解毒，解不掉就毒死》 | 18.0 | 18.0 |
总价:
180.00
//shopping.js
window.onload = function(){
//页面加载完成立刻执行
getTotal();
//给所有的减按钮绑定事件
bindDecr();
//给所有的加按钮绑定事件
bindIncr();
//给添加商品的按钮绑定事件
bindAdd();
//给提交订单的按钮绑定事件
document.getElementById("orderBtn").onclick = function(){
//取到所有的复选框，表头的不算
var cks = document.querySelectorAll("td [type = 'checkbox']");
//遍历计算总价
var total = 0;
for(var x = 0;x < cks.length;x++){
if(cks[x].checked){
//被选中的复选框，取出这一行所有的td中的第5个小计的值
var td = cks[x].parentElement.parentElement.children[4];
//取出小计的值
total += parseInt(td.innerText);
}
}
alert("订单总价为："+total);
}
}
//给添加商品的按钮绑定事件
function bindAdd(){
var addBtn = document.getElementById("add");
addBtn.onclick = function(){
//取出三个文本框
var itemTitleDom = document.getElementById("itemTitle");
var itemPriceDom = document.getElementById("itemPrice");
var itemNumDom = document.getElementById("itemNum");
var tableDom = document.getElementById("itemList");
//生成tr
var tr = document.createElement("tr");
//checkbox
var td1 = document.createElement("td");
var ip1 = document.createElement("input");
ip1.type = "checkbox";
td1.append(ip1);
tr.append(td1);
//名称
var td2 = document.createElement("td");
td2.append(itemTitleDom.value);
tr.append(td2);
//价格
var td3 = document.createElement("td");
td3.append(itemPriceDom.value);
tr.append(td3);
//数量
var td4 = document.createElement("td");
var ip4 = document.createElement("input");
var btn1 = document.createElement("input");
var btn2 = document.createElement("input");
btn1.type = "button";
btn1.value = "-";
btn1.name = "decr";
td4.append(btn1);
ip4.type = "text";
ip4.style.width = "20px";
ip4.value = itemNumDom.value;
td4.append(ip4);
btn2.type = "button";
btn2.value = "+";
btn2.name = "incr";
td4.append(btn2);
tr.append(td4);
//小计
var td5 = document.createElement("td");
td5.setAttribute("name","subTotal");
tr.append(td5);
//操作
var td6 = document.createElement("td");
var ip6 = document.createElement("input");
ip6.type = "button";
ip6.value = "删除";
td6.append(ip6);
tr.append(td6);
//给这个删除按钮直接绑定事件
ip6.onclick = function(){
//删除整行，前三个不是动态生成的不能删除
ip6.parentElement.parentElement.remove();
//重新计算总价
getTotal();
}
//将tr加入table
tableDom.append(tr);
//计算小计
getSubTotal(ip4);
//计算总价
getTotal();
//减按钮绑定
bindDecr();
//加按钮绑定
bindIncr();
}
}
//定义一个函数计算总价
function getTotal(){
//找到所有小计的td
var tds = document.querySelectorAll("[name='subTotal']");
var total = 0;
//遍历数组，计算总价
for(var x = 0;x < tds.length;x++){
total += parseFloat(tds[x].innerText);
}
//将总价写入对应的span
document.getElementById("total").innerText = total;
}
//定义一个函数计算小计
// numDom 这里需要传入输入框的DOM对象本身
function getSubTotal(numDom){
//取出当前的数量
var num = numDom.value;
//取出价格
var tdBtns = numDom.parentElement; //取出父元素td
var price = parseFloat(tdBtns.previousElementSibling.innerText);//td的前一个兄弟节点就是价格
//计算小计
var subTotal = num * price;
//将小计写入后面 td的下一个兄弟元素节点
tdBtns.nextElementSibling.innerText = subTotal;
}
//定义一个函数给减按钮添加事件
function bindDecr(){
//找到所有的减按钮
var decrBtns = document.querySelectorAll("[name = 'decr']");
//遍历DOM数组，逐个绑定事件
for(var x = 0;x < decrBtns.length;x++){
//解绑之前的事件,decrBtns[x]表示每一个
decrBtns[x].onclick = null;
//重新绑定事件
decrBtns[x].onclick = function(){
//这里的this就表示当前按钮本身,取出输入框对象
var inputDom = this.nextElementSibling;
//取出值判断是否已经等于1了
if(inputDom.value > 1){
inputDom.value = inputDom.value - 1;
//重新计算小计
getSubTotal(inputDom);
//重新计算总价
getTotal();
}
}
}
}
//定义一个函数给加按钮添加事件
function bindIncr(){
//找到所有的减按钮
var incrBtns = document.querySelectorAll("[name = 'incr']");
//遍历DOM数组，逐个绑定事件
for(var x = 0;x < incrBtns.length;x++){
//解绑之前的事件,incrBtns[x]表示每一个
incrBtns[x].onclick = null;
//重新绑定事件
incrBtns[x].onclick = function(){
//这里的this就表示当前按钮本身,取出输入框对象
var inputDom = this.previousElementSibling;
//取出值 加按钮不用判断
inputDom.value = parseInt(inputDom.value)+ 1;
//重新计算小计
getSubTotal(inputDom);
//重新计算总价
getTotal();
}
}
}