From 7604e6a2cdb2e46406ee6076d27d13521107d35e Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 28 May 2026 21:46:01 +0700 Subject: [PATCH] t --- index.html | 126 +++++++++++++++++++++++++++++++++++++++++++++++++++++ lib.js | 10 +++++ main.js | 107 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 243 insertions(+) create mode 100644 index.html create mode 100644 lib.js create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..5695c0f --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + + Danh sách sản phẩm + + + + +
+
+

Quản lý sản phẩm

+

Danh sách các sản phẩm hiện có trong hệ thống

+
+ +
+ + + + + + + + + + + + + + + +
IDHình ảnhTên sản phẩmGiáTrạng tháiThao tác
+
+ +
+ Hiển thị 1 sản phẩm +
+ + +
+
+
+ + /*Form Thêm*/ +
+
+

Thêm sản phẩm mới

+
+ +
+
+ + +
+ +
+ + +
+ +
+ +
+
+ No Img +
+ +
+
+ +
+
+ Trạng thái hoạt động + Sản phẩm sẽ được hiển thị ngay sau khi tạo +
+ +
+ +
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/lib.js b/lib.js new file mode 100644 index 0000000..3737060 --- /dev/null +++ b/lib.js @@ -0,0 +1,10 @@ +function getFormData(elementList) { + let data = {} + for (let i = 0; i < elementList.length; i++) { + if(elementList[i].tagName == "BUTTON") { + continue; + } + data[elementList[i].name] = elementList[i].value + } + return data; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..0ebe2ee --- /dev/null +++ b/main.js @@ -0,0 +1,107 @@ +let idCount = 0; + +const productList = [ + { + id: -1, + name: "SP 1222", + price: 1000, + status: false, + avatarUrl: "data:image/webp;base64,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" + } +] + +const tbodyEl = document.querySelector("tbody") +const form_titleEl = document.querySelector(".form_title") +const formEL = document.querySelector("form") + +let productEdit = null; + +function renderUi(proArr) { + let trListHtml = `` + for (pr of proArr) { + trListHtml += ` + + ${pr.id} + + SP 1 + + ${pr.name} + ${pr.price} đ + + + ${pr.status ? "Hoạt động" : "Không bán"} + + + + + + + + ` + } + + tbodyEl.innerHTML = trListHtml + + form_titleEl.innerText = productEdit ? "Sửa sản phẩm" : "Thêm sản phẩm" + + if(productEdit) { + formEL.querySelectorAll("input")[0].value = productEdit.name; + formEL.querySelectorAll("input")[1].value = productEdit.price; + formEL.querySelectorAll("input")[2].value = productEdit.avatarUrl; + formEL.querySelectorAll("input")[3].checked = productEdit.status; + }else { + formEL.reset(); + } +} + +function save(event) { + event.preventDefault(); + let form = event.target; + + let newProduct = { + id: productEdit ? productEdit.id : idCount++, + name: form.name.value, + price: form.price.value, + status: form.status.checked, + avatarUrl: form.avatarUrl.value, + } + + if (!productEdit) { + productList.push(newProduct) + }else { + for(let i = 0; i < productList.length; i++) { + if(productList[i].id == productEdit.id) { + productList[i] = newProduct + } + } + } + + + + + formEL.reset() + productEdit = null; + renderUi(productList) +} + +function editProduct(proId) { + productEdit = productList.find(pr => pr.id == proId) + renderUi(productList) +} + +function deleteProduct(proId) { + + if(!confirm("chắc chưa")) { + return + } + + for(let i = 0; i < productList.length; i++) { + if (productList[i].id == proId) { + productList.splice(i, 1) + break; + } + } + renderUi(productList) +} + +renderUi(productList)