整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
<script src="js/jquery_shopping.js"></script>
</head>
<body>
<div class="panel-group">
<div class="panel panel-primary">
<table class="table table-bordered table-striped table-hover table-condensed" id="tab_s">
<thead>
<tr class="info">
<th>商品名稱</th>
<th>單價</th>
<th>數量</th>
<th>小計</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tby">
<tr>
<td>電腦</td>
<td class="price">￥3999.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請輸入數量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥3999.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
<tr>
<td>手機</td>
<td class="price">￥1998.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請輸入數量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥1998.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
<tr>
<td>空調</td>
<td class="price">￥2099.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請輸入數量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥2099.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="panel-footer">
<span>已選<span style="color: red;" class="num_sum">1</span>件商品</span>
<span>總計:</span>
<span class="sum" style="color: red;">0</span>
<div>
<button type="button" class="btn btn-default btn-sm" name="delSome">
刪除選中商品
</button>
<button type="button" class="btn btn-default btn-sm" name="delAll">
清空購物車
</button>
</div>
</div>
</div>
</div>
</body>
</html>Js代碼：
$(function(){
function initTableCheckbox() {
var $thr = $('table thead tr');
var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
/*將全選/反選復選框添加到表頭最前，即增加一列*/
$thr.prepend($checkAllTh);
var $checkAll = $thr.find('input');
$checkAll.click(function(event){
/*將所有行的選中狀態設成全選框的選中狀態*/
$tbr.find('input').prop('checked',$(this).prop('checked'));
/*并調整所有選中行的CSS樣式*/
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('warning');
}
else{
$tbr.find('input').parent().parent().removeClass('warning');
}
getSum();
/*阻止向上冒泡，以防再次觸發點擊操作*/
event.stopPropagation();
});
/*點擊全選框所在單元格時也觸發全選框的點擊操作*/
$checkAllTh.click(function(){
$(this).find('input:[type="checkbox"]').click();
});
var $tbr = $('table tbody tr');
var $checkItemTd = $('<td><input type="checkbox" name="checkItem" class="chk_itm"/></td>');
/*每一行都在最前面插入一個選中復選框的單元格*/
$tbr.prepend($checkItemTd);
/*點擊每一行的選中復選框時*/
/*
$tbr.find('input').click(function(event){
//調整選中行的CSS樣式
$(this).parent().parent().toggleClass('warning');
//如果已經被選中行的行數等于表格的數據行數，將全選框設為選中狀態，否則設為未選中狀態
$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
//阻止向上冒泡，以防再次觸發點擊操作
event.stopPropagation();
});
//點擊每一行時也觸發該行的選中操作
$tbr.click(function(){
$(this).find('input').click();
});
*/
}
initTableCheckbox();
getSum();
$(".chk_itm").change(function() {
getSum();
});
//添加商品
$("button[name='add']").click(function() {
let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
console.log("添加商品的num:"+n);
n++;
$(this).parent().siblings().find("input[name='num']").val(n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("添加商品的price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
//減少商品
$("button[name='sub']").click(function() {
let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
console.log("減少商品的num:"+n);
if (n === 1) {
return false;
}
n--;
$(this).parent().siblings().find("input[name='num']").val(n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("減少商品的price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
$("input[name='num']").change(function() {
let n = $(this).val();
console.log("數量num:"+n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("價格price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
function getSum() {
let count = 0; //計算總件數
let money = 0; //計算總價錢
$("input[name='num']").each(function(index) {
if ($(".chk_itm").eq(index).prop("checked") == true) {
count += parseInt($("input[name='num']").eq(index).val());
money += parseFloat($(".small_total").eq(index).text().substr(1));
}
});
$(".num_sum").html(count);
$(".sum").html(money.toFixed(2));
}
//點擊刪除之后一定是刪除當前的商品，獲取this
$("button[name='delete']").click(function() {
//刪除的是當前的商品
$(this).parent().parent().remove();
$(".chk_itm").change();
getSum();
clearCheckAll();
});
//刪除選定的商品:小的復選框如果選中就刪除對應的商品
//刪除的是選中的商品
$("button[name='delSome']").click(function() {
//刪除的是選中的商品
$(".chk_itm:checked").parent().parent().remove();
getSum();
clearCheckAll();
});
//清空購物車
$("button[name='delAll']").click(function() {
$("#tby").empty();
getSum();
clearCheckAll();
});
function clearCheckAll() {
if ($("#tby").innerText == '') {
$(".checkAll").prop("checked", false);
}
}
});效果
案例和由此案例重點講解的知識點介紹
案例代碼實現
數據類型知識點詳解
案例相關效果圖
該案例涉及到的知識點
js變量
js數據類型
js運算符
第一步：編寫表單的html
依次拷貝出兩個tr，讓我們購物車多幾件商品，只需要拷貝上一行代碼，然后修改一下標題。價格即可
第二步：編寫該表單的樣式css
第三步：引入方便的jquery庫，方便我們使用
第四步：綁定減少數量的按鍵，并獲取上一元素的單價，將字符串轉換成數字，同時獲取當前input的數量，并進行數據計算
第五步：依照減少商品數量的方法，仿寫增加商品數量
1. JavaScript變量
變量的語法：
變量定義： var 自定義名稱;
<script>
var name=“張三”; //張三為變量 name是變量名 var 關鍵字定義變量
</script>
注意： = 為賦值符號，不是我們理解的等號
變量命名的規范：
變量名必須以字符或下劃線“_”開頭
變量可以包含數字、從A至Z的大小字母
JavaScript嚴格區分大小寫，computer和Computer是兩個完全不同的變量
禁止使用javascript的保留關鍵字作為變量名
2. JavaScript數據類型
數字類型（Number）
1: 最基本的數據類型
2: 不區分整型數值和浮點型數值
3: 能表示的最大值是±1.7976931348623157乘以10的308次方
能表示的最小值是±5 乘以10的-324次方
4：包含十六進制數據，以 0x開頭 0到9之間的數字，a(A)-f(F)之間字母構成。 a-f對應的數字是10-15
5： 八進制直接以數字0開始，有0-7之間的數字組成。
字符串類型（String）
字符串由單引號或雙引號括起
例如單獨一個字母也被稱為字符串（例如：‘a’）
轉義字符 \" \'
比較運算符：> ,<, ==, !=
var a=1; var b=2; alert(a>b);
布爾類型：Boolean
Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
JavaScript 特殊類型
取值null 含義：值為空（主動）
取值undefined 含義：變量未初始化
先讓我們看一下靜態頁面的效果圖：
簡單說一下這個功能模塊的需求：
現在讓我們開始吧
一 ，創建一個Vue對象，設置好數據。
var cart; //全局Vue對象
//通過封裝一個方法來創建Vue對象
function createVue(list) { //傳入通過后臺獲取的list
cart = new Vue({
el:'#cart',
data(){
return {
list:list //商品列表
}
}
});
}
二 ，假設從后臺請求到數據，然后賦值到Vue對象中
window.onload = function () {
//請求后臺代碼 。。。。
//請求成功后將獲得的list賦值給cart的list
let list = [
{
goodsTitle: "衛龍辣條", //商品名
specifications: "大包", //商品規格
unitPrice: "5", //商品單價
subimage1Filename :"20180317eeftyd.jpg", //商品圖片名
purchaseQuantity: 6 //商品數量
},
{
goodsTitle: "雕牌洗衣粉",
specifications: "大包",
unitPrice: "13",
subimage1Filename: "20180317ggptfg.jpg",
purchaseQuantity: 1
},
{
goodsTitle: "旺仔牛奶",
specifications: "20盒裝",
unitPrice: "45",
subimage1Filename: "20180317feftyp.jpg",
purchaseQuantity: 1
}];
createVue(list); //執行創建Vue對象方法
}
);
三 ，修改html部分代碼，將數據展示出來
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" :id="'check'+index" name="checkboxs" />
<label :for="'check'+index"></label>
</td>
<td>
<img :src="'路徑前綴/'+item.subimage1Filename" />
</td>
<td style="text-align:left;">
<p>{{item.goodsTitle}}</p>
<p>規格：{{item.specifications}}</p>
</td>
<td>￥{{item.unitPrice}}</td>
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
<td><button v-on:click="checkDel(index)">刪除</button></td>
</tr>
這樣就能將單個商品部分全部循環打印出來，并且將對應的信息打印在對應位置。效果圖如下：
四，實現全選和勾選時候總價的計算，這部分算是有點挑戰了。我的思路是在Vue對象中新增加一個數據用來標識商品的選中狀態，所以創建Vue方法中的代碼改成如下所示：
cart = new Vue({
el: '#cart',
data() {
return {
list: list,
checkeds: new Array(list.length) //初始化成list的長度
}
});
然后在html中將商品對應的checkbox與checkeds綁定起來,修改后的代碼如下：
<input type="checkbox" :id="'check'+index" name="checkboxs" v-model="checkeds[index]" />
利用computed屬性計算價格總和：
sum () {
let sum = 0;
for (let i in this.list) {
if (this.checkeds[i]) //如果checkeds[i]的結果為truth，則進行累加
sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
}
return sum;
}
HTML部分，我們在對應位置用{{sum}}帶入就能進行顯示了。這樣就能實現計算勾選過的商品小計之和了。接下來實現全選功能，在methods屬性中添加一個方法checkAll，具體代碼如下：
checkAll (event) { //這里的event就是全選checkbox對象
if (event.checked) { //如果全選的checkbox選中，將checkeds所有的值設置為true，對應商品checkbox的選中狀態自動更新
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, true);
}
else { //否則就進行與上面相反的操作
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, false);
}
}
}
經過上面的一波操作，已經可以實現全選和點選時候的價格之和計算。我們還要統計商品選中的數量，這個很簡單，同樣使用computed屬性，對checkeds中結果為truth的進行統計就好了，代碼如下：
checkNum: function () {
let num = 0;
for (let i in this.checkeds) {
if (this.checkeds[i]) {
num++;
}
}
return num;
}
然后在html中的對應位置用{{checkNum}}代入即可。現在我們已經實現了近一半需求，讓我們繼續完成他們吧！ 五 ，實現購物車物品單個刪除功能，這個就很簡單啦，我們在methods中增加一個del方法，使用js數組的splice方法就可以實現。
del (index) {
this.list.splice(index, 1); //只需要從數組中移除對應項，視圖會自動更新，不得不說，Vue太棒啦！
this.checkeds.splice(index,1); //同時刪除對應的選中狀態標識
}
然后就是給刪除按鈕綁定點擊事件(index是循環列表時候的下標)：
<button v-on:click="del(index)">刪除</button>
這樣我們就輕松實現了刪除單個商品的需求，當然防止用戶誤刪，在用戶點擊刪除按鈕時我們可以彈出一個確認框提示用戶，這里我們就不去實現了。 六 ，實現購物車單個商品的數量增加，減少，并實時更新商品的小計。首先在methods中添加增加方法add和減少方法minius：
add (index) {
this.list[index].purchaseQuantity++; //這里按理來說應該查詢后臺對應商品庫存量來進行限制的，這里不涉及到后臺所以沒加
},
minius (index) {
if (this.list[index].purchaseQuantity > 1) { //這里添加一個限制，最少要有一個商品
this.list[index].purchaseQuantity--;
}
}
然后我們在對應的加和減的按鈕上綁定事件來觸發這兩個方法（index為列表循環時候的下標）：
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
從上面的代碼可以看到我們在小計一欄直接進行商品單價和數量相乘，這樣就可以實現實時更新了。
至此，我們的需求就算是完成了，最后給大家留兩個小問題思考一下
一 ，如何實現批量刪除？ 二 ，在全選之后，我們取消了一個商品的狀態，全選框的選中狀態仍然是選中的，此時應該是不選中的，或者當我們一個一個把商品的選中狀態全部勾選，全選框的狀態仍然是補選中的，此時應該是選中狀態（如下兩圖所示），這個現象如何解決？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
