說明
使用js腳本實現商品的添加、修改、刪除、價格計算。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript實現購物車功能</title>
<style type="text/css">
.num {
width: 30px;
}
</style>
<!--入jquery-->
<script src="script/jquery-1.12.4.js"></script>
<script>
//1.實現全選的效果
function checkAll() {
let eles = document.getElementsByName("product");//獲取的是對象集合
//console.log(eles);//調試代碼
for (let i = 0; i < eles.length; i++) {
eles[i].checked = document.getElementById("checkall").checked;
}
}
//2.實現選擇商品改變全選框的效果
function checkProduct() {
let ckall = document.getElementById("checkall");//全選框
let eles = document.getElementsByName("product");//獲取商品選框對象集合
let size = eles.length;//商品數目
let total = 0;//選中的商品數目
//遍歷集合，判斷商品是否都被選中
for (let i = 0; i < size; i++) {
if (eles[i].checked == false) {
ckall.checked = false;
break;//中斷循環
} else {
total += 1;
}
}
//判斷是否已經遍歷完成
if (total == size) {
ckall.checked = true;
}
}
//jquery開發環境
$(function () {
//alert("hello jquey!");
//3.實現增加商品數量
$("#mycart").find(".add").click(function () {
let $_pre = $(this).prev();
//console.log($_pre);
let num = parseInt($_pre.val());
//alert(num);
$_pre.val(num + 1);//數量+1
//改變小計金額
let price=$_pre.parent().prev().text();//讀取價格
$_pre.parent().next().text(parseInt(price)*(num+1));
totalPrice();
})
//4.減少商品數量
$("#mycart").find(".sub").click(function () {
let $_next = $(this).next();
let num = parseInt($_next.val());
if (num < 2) {
let result = confirm("確定刪除該商品?");
if (result == true) {
$_next.parent().parent().remove();//刪除商品
totalPrice();
}
} else {
$_next.val(num - 1);//數量-1
//改變小計金額
let price=$_next.parent().prev().text();//讀取價格
$_next.parent().next().text(parseInt(price)*(num-1));
totalPrice();
}
})
//5.增加商品效果
$("#addProduct").click(function () {
let $_newRow =$("#mycart").find("tr").eq(1).clone(true);
$("#mycart").find("tr").eq(1).after($_newRow);
totalPrice();
})
//6.總計價格
function totalPrice() {
var sum=0;
$(".total").each(function (i,e) {
sum+=parseInt($(e).text());
})
$("#sum").text(sum);
}
//執行計算總價
totalPrice();
})
</script>
</head>
<body>
<button id="addProduct">增加商品</button>
<hr>
<table id="mycart" border="1px">
<tr>
<th>全選<input type="checkbox" id="checkall" onclick="checkAll()"></th>
<th>品名</th>
<th>價格</th>
<th>數量</th>
<th>小計</th>
</tr>
<tr>
<td><input type="checkbox" name="product" onclick="checkProduct()"></td>
<td>衣服</td>
<td>800</td>
<td>
<button class="sub">-</button>
<input type="text" name="num" class="num" value="1">
<button class="add">+</button>
</td>
<td class="total">800</td>
</tr>
<tr>
<td><input type="checkbox" name="product" onclick="checkProduct()"></td>
<td>鞋子</td>
<td>500</td>
<td>
<button class="sub">-</button>
<input type="text" name="num" class="num" value="1">
<button class="add">+</button>
</td>
<td class="total">500</td>
</tr>
<tr>
<td colspan="3">總計</td>
<td colspan="2" id="sum">888</td>
</tr>
</table>
</body>
</html>