By GokiSoft.com|
15:25 12/01/2022|
Học JS
[Video] Quản lý sản phẩm bằng javascript - lập trình javascript - C2110I
Quản lý sản phẩm bằng javascript - lập trình javascript
#script.js
// Mapping tat ca tag html can thiet cho bai nay -> bien object js
var productTag = document.getElementById('product_id')
var manufacturerTag = document.getElementById('manufacturer_id')
var categoryTag = document.getElementById('category_id')
var priceTag = document.getElementById('price_id')
var quantityTag = document.getElementById('quanlity_id')
var totalPriceTag = document.getElementById('total_price_id')
var resultTag = document.getElementById('result')
// Mang quan ly danh sach san pham
var productList = []
var currentIndex = -1 //index: 0 -> length - 1
// Xu ly khi nguoi dung chon manufacturer name -> do du lieu tuong ung vao muc category name
// Dinh nghia duoc cau truc du lieu cua bai nay
var dataList = [
{
"manufacturer": "Apple",
"categoryList": ["A1", "A2", "A3"]
}, {
"manufacturer": "Samsung",
"categoryList": ["S1", "S2", "S3", "S4", "S5"]
}, {
"manufacturer": "LG",
"categoryList": ["LG01", "LG02", "LG03"]
},{
"manufacturer": "Sony",
"categoryList": ["SO01", "SO02", "S03", "S04"]
}, {
"manufacturer": "Google",
"categoryList": ["G1", "G2", "G3"]
}
]
// Duyet qua mang dataList -> lay ra dc tung manufacturer -> chen vao trong tag html id:manufacturer_id
for(var item of dataList) {
// gan doi tuong vao bien item
manufacturerTag.innerHTML += `<option value="${item.manufacturer}">${item.manufacturer}</option>`
}
function changeManufacturer() {
var m = manufacturerTag.value
console.log('manufacturer: ' + m)
var categoryList = []
for(var item of dataList) {
if(item.manufacturer == m) {
categoryList = item.categoryList
break
}
}
//Do du lieu vao categoryList
categoryTag.innerHTML = '<option value="">-- Select --</option>'
for(var v of categoryList) {
categoryTag.innerHTML += `<option value="${v}">${v}</option>`
}
}
function updateTotalPrice() {
var p = priceTag.value
var q = quantityTag.value
totalPriceTag.value = p * q
}
function saveData() {
//lay du lieu nguoi dung nhap vao
var product = {
"productName": productTag.value,
"manufacturer": manufacturerTag.value,
"category": categoryTag.value,
"price": priceTag.value,
"quantity": quantityTag.value,
"totalPrice": totalPriceTag.value
}
if(currentIndex >= 0) {
//update
productList[currentIndex] = product
currentIndex = -1
} else {
productList.push(product)
}
showProduct()
return false
}
function removeProduct(index) {
var option = confirm('Are you sure to remove this product?')
if(!option) return
productList.splice(index, 1)
showProduct()
}
function selectProduct(index) {
currentIndex = index
var p = productList[index]
productTag.value = p.productName
manufacturerTag.value = p.manufacturer
changeManufacturer()
categoryTag.value = p.category
priceTag.value = p.price
quantityTag.value = p.quantity
totalPriceTag.value = p.price * p.quantity
}
function showProduct() {
result.innerHTML = ''
index = 0
for(var product of productList) {
result.innerHTML += `<tr>
<td>${index + 1}</td>
<td>${product.productName}</td>
<td>${product.manufacturer}</td>
<td>${product.category}</td>
<td>${product.price}</td>
<td>${product.quantity}</td>
<td><button class="btn-warning" onclick="selectProduct(${index})">Edit</button></td>
<td><button class="btn-danger" onclick="removeProduct(${index})">Remove</button></td>
</tr>`
index++
}
}#student.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quan Ly Thong Tin Sinh Vien - Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="heading">
Input Product Detail Information
</div>
<div class="body">
<form method="post" onsubmit="return saveData();">
<div class="form-group">
<label>Product Name:</label>
<input required type="text" name="product_name" id="product_id">
</div>
<div class="form-group">
<label>Manufacturer Name:</label>
<select required name="manufacturer_name" id="manufacturer_id" onchange="changeManufacturer()">
<option value="">-- Select --</option>
</select>
</div>
<div class="form-group">
<label>Category:</label>
<select required name="category_name" id="category_id">
<option value="">-- Select --</option>
</select>
</div>
<div class="form-group">
<label>Price:</label>
<input required type="number" name="price_name" id="price_id" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Quanity:</label>
<input required type="number" name="quanlity_name" id="quanlity_id" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Total Price:</label>
<input disabled type="number" name="total_price" id="total_price_id">
</div>
<div class="form-group">
<button class="btn-success" type="submit">Save Product</button>
<button class="btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</div>
<div class="container">
<div class="heading">
Product Management
</div>
<div class="body">
<table style="width: 100%" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Product Name</th>
<th>Manufacturer Name</th>
<th>Category Name</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<!-- Chua danh sach san pham da them vao -->
<tbody id="result"></tbody>
</table>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>#style.css
.container {
width: 600px;
margin: 0px auto;
border: solid #337ab7 1px;
margin-bottom: 20px;
}
.container .heading {
background-color: #337ab7;
color: white;
padding: 8px;
}
.body {
padding: 10px;
}
.form-group {
width: 100%;
}
.form-group label, .form-group input, .form-group select {
width: 99%;
font-size: 16px;
margin-bottom: 15px;
}
.btn-success {
background-color: green;
border: none;
padding: 8px;
color: white;
}
.btn-warning {
background-color: orange;
border: none;
padding: 8px;
color: black;
}
.btn-danger {
background-color: red;
border: none;
padding: 8px;
color: black;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
