JS案例 購物車操作(簡單實現)

2022-08-29 18:15:12 字數 1995 閱讀 5607

*

table

tr:nth-child(1)

imgimg+span

tdtr td:nth-child(2)

tr td:nth-child(4) div button

tr td:nth-child(4) div input

tr td:nth-child(3),tr td:nth-child(5)

table>div

function table(obj) 

table.prototype = ,

createtab: function (obj)

this.table = document.createelement("table"); //建立**

var thr = document.createelement("tr"); //建立**標題

var selectall = document.createelement("th");

var selectallinput = document.createelement("input"); //全選

selectallinput.self = this;

selectallinput.addeventlistener("change", this.selecthandler); //新增事件,當全選建改變時觸發

selectallinput.type = "checkbox";

selectallinput.checked = this.allselect; //給其選中新增值,讓資料驅動更改選中狀態

selectall.textcontent = "全選";

this.createname("商品", thr);

this.createname("單價", thr);

this.createname("數量", thr);

this.createname("小計", thr);

this.createname("操作", thr);

for (var i = 0; i < obj.length; i++) else if (str === "img") else if (str === "price") else if (str === "num") else if (str === "sum") else if (str === "del") }}

this.addall(obj, this.table); //根據更新的**資料新建商品總價及總個數

return this.table;

},addall: function (obj, parent)

addallitem.textcontent = "總數:" + sum;

addallprice.textcontent = "總價:" + price;

},createname: function (text, parent) ,

changenum: function (e)

} else if (this.textcontent === "-")

} else else if (number(this.value) > 99) else if (number(this.value) < 1) else

}this.parentnode.self.init(this.parentnode.data); //根據更改後的資料驅動建立**

},delhandler: function (e) ,

selecthandler: function (e)

} else

if (sum) else

}this.self.init(this.self.obj); //根據更改後的資料驅動建立**

console.log(this.checked);

}};table.prototype.constructor = table;

JS實現購物車功能(JS案例)

html 刪除 全選 商品單價數量 小計操作 全選 全部刪除 已選商品 3件顯示或隱藏 合計 7000 結算css body div.box div.box table div.box table td,div.box th div.box th div.box table tbody img di...

vue 簡單實現購物車案例

這個案例是對前面基礎知識的乙個整合,用到的知識點還是挺多的,比如 filters 以及屬性的動態繫結等。2020 6 17 修改 求總 時,換用高階函式reduce。書籍名稱 出版日期 購買數量 操作 移除 總 購物車為空 data methods decrement key remove key ...

購物車案例

寫錄入系統的介面 var express require express 引入mongoose var mongoose require mongoose mongoose.connect mongodb var con mongoose.connection 判斷是否連線成功 con.on ope...