Created
April 4, 2025 14:34
-
-
Save hoadh/1cb468c9cfb1c8c395209e5c8026c637 to your computer and use it in GitHub Desktop.
Bài tập quản lý sản phẩm (Module 1)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <h2>Add New Product</h2> | |
| Product name: <input type="text" name="product_name" id="product_name"> | |
| <input type="button" value="Add Product" onclick="addProduct()"> | |
| <h2>Display All Product</h2> | |
| <table id="product_table"></table> | |
| </body> | |
| <script> | |
| let products = [ | |
| "iPhone 15", | |
| "Apple iPad Gen 6", | |
| "Samsung Galaxy", | |
| "Xiaomi Red" | |
| ]; | |
| function displayAllProducts() { | |
| let table = document.getElementById("product_table"); | |
| let display_text = "<tr><th>Tên sản phẩm</th></tr>"; | |
| for (let i = 0; i < products.length; i++) { | |
| display_text += "<tr>" + | |
| "<td>" + products[i] + "</td>" + | |
| "<td><input type='button' value='Edit' onclick='editProduct(" + i + ")'></td>" + | |
| "<td><input type='button' value='Delete'></td>" + | |
| "</tr>"; | |
| // display_text += ` | |
| // <tr> | |
| // <td>${products[i]}</td> | |
| // <td><input type="button" value="Edit" onclick="editProduct(${i})"></td> | |
| // <td><input type="button" value="Delete"></td> | |
| // </tr> | |
| // `; | |
| } | |
| table.innerHTML = display_text; | |
| } | |
| // gọi hàm hiển thị sản phẩm | |
| displayAllProducts(); | |
| // Hàm thêm sản phẩm | |
| function addProduct() { | |
| let product = document.getElementById("product_name"); | |
| let productName = product.value; | |
| if (productName === "") { | |
| alert("Product name is empty"); | |
| } else { | |
| products.push(productName); | |
| displayAllProducts(); | |
| product.value = ""; | |
| } | |
| } | |
| function editProduct(product_index) { | |
| let new_product_name = prompt("Nhập vào tên mới"); | |
| products[product_index] = new_product_name; | |
| displayAllProducts(); | |
| } | |
| function deleteProduct(product_index) {} | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment