JS，HTML,CSS實(shí)現(xiàn)購物車功能（改進(jìn)版）【詩書畫唱】
<!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遍歷每個(gè)tr，給每個(gè)tr賦值事件
for(var xiaBiao of trShuZuVar) {
//用for給每個(gè)tr添加一個(gè)鼠標(biāo)移入的事件
xiaBiao.onmouseover = function() {
//用this. style . backgroundColor改變當(dāng)前的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) {
// ==等于號(hào)很重要
if(i.className=="danXuanAnNiu quanXuanAnNiu") {
i.onclick = function() {
// alert("點(diǎn)擊了全選按鈕");
for(var j of danXuanAnNiuShuZu) {
j.checked = this.checked;
}
// jiSan:計(jì)算
jiSuan();
}
} else {
i.onclick = function() {
jiSuan();
}
}
}
// zengJiaJianShaoShuLiang:增加減少數(shù)量
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>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</th>
</tr>
<tr>
<td><input type="checkbox" class="danXuanAnNiu"></td>
<td>海報(bào)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ào)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>海報(bào)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>海報(bào)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">總數(shù)量<span id="zongShuLiang">0</span>
件? ? ? 總價(jià)格
<span id="zongJiaGeId">0</span>元</p>
</body>
</html>
