<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript购物车</title>
<style type="text/css">
.commodityNo {
width: 40px;
text-align: center;
}
td {
text-align: center;
}
</style>
</head>
<body>
<script language="JavaScript">
//空格、注释也算一个子节点
function decrease(element) {
for (var i = 0; i < element.parentNode.childNodes.length; i++) {
var thechild = element.parentNode.childNodes[i];
if (thechild.className === "commodityNo" && parseInt(thechild.value) > 0) {
//element.parentNode.childNodes[i].value = parseInt(thechild.value)-1
//console.log(thechild);
thechild.value = parseInt(thechild.value) - 1;
f();
break;
}
}
}
function add(element) {
for (var i = 0; i < element.parentNode.childNodes.length; i++) {
var thechild = element.parentNode.childNodes[i];
if (thechild.className === "commodityNo") {
thechild.value = parseInt(thechild.value) + 1;
f();
break;
}
}
//element.previousSibling.previousSibling.value = parseInt(element.previousSibling.previousSibling.value) + 1;
}
//小计和总计
function f() {
var sum = 0.0;
var tt = document.getElementById("cartTable");
var rr = tt.getElementsByTagName("tr");
for (var i = 1; i < (rr.length - 1); i++) {
var cel = rr[i].getElementsByTagName("td");
var price = parseFloat(cel[1].innerText);
var q = parseInt(cel[2].getElementsByTagName("input")[1].value);
var result = price * q;
cel[3].innerHTML = result.toFixed(2);
sum += result;
}
console.log(sum);
document.getElementById("suminfo").innerText = sum.toFixed(2);
}
</script>
<table cellpadding="5" cellspacing="5" width="600" frame="box" id="cartTable">
<caption>购物车</caption>
<tr>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr>
<td>挪威的森林</td>
<td>18.80</td>
<td><!--8个子节点，子节点包括空格、换行和注释-->
<input type="button" value="-" onclick="decrease(this)">
<input id="commodityNo1" value="0" class="commodityNo" onchange="f()">
<input type="button" value="+" onclick="add(this)">
</td>
<td>0.00</td>
</tr>
<tr>
<td>追风筝的人</td>
<td>32.40</td>
<td><!--8个子节点，子节点包括空格和注释-->
<input type="button" value="-" onclick="decrease(this)">
<input id="commodityNo2" value="0" class="commodityNo" onchange="f()">
<input type="button" value="+" onclick="add(this)">
</td>
<td>0.00</td>
</tr>
<tr>
<td>雪落香杉树</td>
<td>46.30</td>
<td><!--8个子节点，子节点包括空格和注释-->
<input type="button" value="-" onclick="decrease(this)">
<input id="commodityNo3" value="0" class="commodityNo" onchange="f()">
<input type="button" value="+" onclick="add(this)">
</td>
<td>0.00</td>
</tr>
<tr>
<td>杀死一只知更鸟</td>
<td>22.50</td>
<td><!--8个子节点，子节点包括空格和注释-->
<input type="button" value="-" onclick="decrease(this)">
<input id="commodityNo4" value="0" class="commodityNo" onchange="f()">
<input type="button" value="+" onclick="add(this)">
</td>
<td>0.00</td>
</tr>
<tr>
<td><strong>总计</strong></td>
<td colspan="2"></td>
<td id="suminfo">0.00</td>
</tr>
</table>
</body>
</html>
网友评论