JS，HTML,CSS实现购物车功能（改进版）【诗书画唱】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 800px;
height: 400px;
margin: 0px auto;
text-align: center;
border-top: solid 1px blue;
border-left: solid 1px blue;
background-color: yellow
}
td {
border-bottom: 1px solid blue;
border-right: 1px solid blue;
}
th {
border-bottom: 1px solid blue;
border-right: 1px solid blue;
}
</style>
<script>
window.onload = function() {
var trShuZuVar = document.getElementsByTagName("tr");
//用for遍历每个tr，给每个tr赋值事件
for(var xiaBiao of trShuZuVar) {
//用for给每个tr添加一个鼠标移入的事件
xiaBiao.onmouseover = function() {
//用this. style . backgroundColor改变当前的tr的背景颜色
this.style.backgroundColor = "blue";
}
xiaBiao.onmouseout = function() {
this.style.backgroundColor = "yellow";
}
}
window.danXuanAnNiuShuZu = document.getElementsByClassName("danXuanAnNiu");
window.tableShuZu= document.getElementsByTagName("table")[0];
window.trShuZu =tableShuZu.getElementsByTagName("tr");
for(var i of danXuanAnNiuShuZu) {
// ==等于号很重要
if(i.className=="danXuanAnNiu quanXuanAnNiu") {
i.onclick = function() {
// alert("点击了全选按钮");
for(var j of danXuanAnNiuShuZu) {
j.checked = this.checked;
}
// jiSan:计算
jiSuan();
}
} else {
i.onclick = function() {
jiSuan();
}
}
}
// zengJiaJianShaoShuLiang:增加减少数量
zengJiaJianShaoShuLiang();
}
function jiSuan() {
var zongShuLiangVar = document.getElementById("zongShuLiang");
var shuliang=0,
zongjiage=0;
for(var j = 1; j < danXuanAnNiuShuZu.length; j++) {
if(danXuanAnNiuShuZu[j].checked) {
shuliang +=
Number(danXuanAnNiuShuZu[j].parentNode.parentNode.children[4].children[1].value);
zongjiage +=
Number(danXuanAnNiuShuZu[j].parentNode.parentNode.children[5].innerHTML);
}
}
zongShuLiangVar.innerHTML = shuliang;
// zongJiaGeId这里为id名
zongJiaGeId.innerHTML = zongjiage;
}
function zengJiaJianShaoShuLiang() {
for(var i of trShuZu) {
var tdShuZu = i.children;
var inputShuZu = tdShuZu[4].children;
for(var j of inputShuZu) {
if(j.value == "-") {
j.onclick = function() {
var danjia = Number(this.parentNode.previousElementSibling.innerHTML);
var wenBenKuangNeiRong = this.nextElementSibling;
var shuliang = Number(wenBenKuangNeiRong.value);
if(shuliang > 1) {
shuliang = shuliang - 1;
wenBenKuangNeiRong.value = shuliang;
var zongjia = danjia * shuliang;
this.parentNode.nextElementSibling.innerHTML = zongjia;
}
jiSuan();
}
}
if(j.value=="+") {
j.onclick = function() {
var danjia = Number(this.parentNode.previousElementSibling.innerHTML);
var input_text = this.previousElementSibling;
var shuliang = Number(input_text.value);
shuliang = shuliang + 1;
input_text.value = shuliang;
var zongjia = danjia * shuliang;
this.parentNode.nextElementSibling.innerHTML = zongjia;
jiSuan();
}
}
}
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<th>
<input type="checkbox" value="全选" class="danXuanAnNiu quanXuanAnNiu"></th>
<th>商品名称</th>
<th>图片</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td><input type="checkbox" class="danXuanAnNiu"></td>
<td>海报A</td>
<td><img src="./img/1.png" width="50px" height="50px"></td>
<td>10</td>
<td>
<input type="button" value="-" />
<input type="text" disabled="disabled" value="1" />
<input type="button" value="+" />
</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="danXuanAnNiu"></td>
<td>海报B</td>
<td><img src="./img/2.png" width="50px" height="50px"></td>
<td>10</td>
<td>
<input type="button" value="-" />
<input type="text" disabled="disabled" value="1" />
<input type="button" value="+" />
</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="danXuanAnNiu"></td>
<td>海报C</td>
<td><img src="./img/3.png" width="50px" height="50px"></td>
<td>10</td>
<td>
<input type="button" value="-" />
<input type="text" disabled="disabled" value="1" />
<input type="button" value="+" />
</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="danXuanAnNiu"></td>
<td>海报D</td>
<td><img src="./img/4.png" width="50px" height="50px"></td>
<td>10</td>
<td>
<input type="button" value="-" />
<input type="text" disabled="disabled" value="1" />
<input type="button" value="+" />
</td>
<td>10</td>
</tr>
</table>
<p align="center">总数量<span id="zongShuLiang">0</span>
件 总价格
<span id="zongJiaGeId">0</span>元</p>
</body>
</html>
