<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1xp solid;
width: 800px;
}
th{
background-color: lightsteelblue;
border: 1px solid #fff;
}
td{
background-color: #f0f0f0;
border: 1px solid #fff;
height: 30px;
vertical-align: middle;
text-align: center;
}
</style>
<script src="shopping.js"></script>
</head>
<body>
<div>
<form action="">
<p>商品名称: <input type="text" id="itemTitle"> </p>
<p>商品价格：<input type="text" id="itemPrice"> </p>
<p>购买数量： <input type="text" id="itemNum"></p>
<p><input type="button" value="添加" id="add"></p>
</form>
</div>
<div>
<h2>购物车</h2>
</div>
<div>
<table id="itemList">
<tr>
<th><input type="checkbox"></th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>《JavaScript全面解毒，解不掉就毒死》</td>
<td>18.0</td>
<td>
<input type="button" value="-" name="decr">
<input type="text" style="width:20px" value="1">
<input type="button" value="+" name="incr">
</td>
<td name ="subTotal">18.0</td>
<td>
<input type="button" value="删除" name="remBtn">
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>《JavaScript全面解毒，解不掉就毒死》</td>
<td>18.0</td>
<td>
<input type="button" value="-" name="decr">
<input type="text" style="width:20px" value="1">
<input type="button" value="+" name="incr">
</td>
<td name ="subTotal">18.0</td>
<td>
<input type="button" value="删除" name="remBtn">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>《JavaScript全面解毒，解不掉就毒死》</td>
<td>18.0</td>
<td>
<input type="button" value="-" name="decr">
<input type="text" style="width:20px" value="1">
<input type="button" value="+" name="incr">
</td>
<td name ="subTotal">18.0</td>
<td>
<input type="button" value="删除" name="remBtn">
</td>
</tr>
</table>
</div>
<div style="text-align: right; margin-right: 50px; width: 800px; margin-top: 10px;
border-top: 1px solid #ccc;" >总价:
<span id="total">180.00</span>
<input type="button" value="提交订单" id="orderBtn">
</div>
</body>
</html>
//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();
}
}
}
