<!DOCTYPE html>
<html>
<head>
<title>Quản lý sản phẩm bằng javascript </title>
<meta charset="utf-8">
<style type="text/css">
.panel {
width: 60%;
margin: 0 auto;
border: solid #4267b2 1px;
}
.panel-heading {
background-color: #4267b2;
padding: 10px;
color: white;
}
.panel-body {
padding: 10px;
}
.panel-body label {
font-weight: bold;
}
.form-group {
display: block;
margin-bottom: 20px;
}
.form-control {
display: block;
width: 98%;
font-size: 16px;
margin-top: 10px;
}
.table {
width: 100%;
}
.table tr {
border-bottom: solid blue 1px;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-heading">
Input product detail information
</div>
<div class="panel-body">
<form method="post">
<div class="form-group">
<label>Product Name:</label>
<input type="number" name="index" id="index" value="" hidden="true">
<input class="form-control" type="text" name="product_name" id="product_name" placeholder="Enter product name">
</div>
<div class="form-group">
<label>Manufacturer Name:</label>
<select class="form-control" id="manuafaturer_name" onchange="changeManufaturer()">
<option value="">-- Choose --</option>
</select>
</div>
<div class="form-group">
<label>Category Name:</label>
<select class="form-control" id="category_name">
</select>
</div>
<div class="form-group">
<label>Price:</label>
<input class="form-control" type="number" name="price" id="price" placeholder="Enter price" value="0" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Quantity:</label>
<input class="form-control" type="text" name="quantity" id="quantity" placeholder="Enter quantity" value="0" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Total Price:</label>
<input class="form-control" type="text" name="total_price" id="total_price" value="0" disabled="true">
</div>
<div class="form-group">
<button class="btn btn-success" type="button" onclick="addProduct()">Add Produce</button>
<button class="btn btn-danger" type="reset">Reset</button>
</div>
</form>
</div>
</div>
<div class="panel" style="margin-top: 20px;">
<div class="panel-heading">
Product List
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Product Name</th>
<th>Manufacture Name</th>
<th>Category Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var manufactureList = {
"Apple": [
"IPhone 5", "IPhone 5s", "IPhone 12"
],
"Sam Sung": [
"Galaxy S5", "Galaxy 10"
],
"LG": [
"1", "2", "3"
]
}
var productList = []
var manuafaturerTag = document.getElementById('manuafaturer_name')
for(var key in manufactureList) {
manuafaturerTag.innerHTML += `<option value='${key}'>${key}</option>`
}
function changeManufaturer() {
key = manuafaturerTag.value
categoryList = manufactureList[key]
console.log(categoryList)
var categoruTag = document.getElementById('category_name')
categoruTag.innerHTML = ''
if(categoryList != null) {
for (var i = 0; i < categoryList.length; i++) {
categoruTag.innerHTML += `<option value='${categoryList[i]}'>${categoryList[i]}</option>`
}
}
}
function updateTotalPrice() {
var price = document.getElementById('price').value
var quantity = document.getElementById('quantity').value
totalPrice = price * quantity
document.getElementById('total_price').value = totalPrice
}
var count = 0
function addProduct() {
var index = document.getElementById('index').value
var productName = document.getElementById('product_name').value
var manufactureName = document.getElementById('manuafaturer_name').value
var categoryName = document.getElementById('category_name').value
var price = document.getElementById('price').value
var quantity = document.getElementById('quantity').value
var totalPrice = document.getElementById('total_price').value
var product = {
'productName': productName,
'manufactureName': manufactureName,
'categoryName': categoryName,
'price': price,
'quantity': quantity,
'totalPrice': totalPrice
}
if(index != '') {
productList[index] = product
showProduct()
return;
}
productList.push(product)
document.getElementById('result').innerHTML += `<tr>
<td>${++count}</td>
<td>${productName}</td>
<td>${manufactureName}</td>
<td>${categoryName}</td>
<td>${price}</td>
<td>${quantity}</td>
<td>${totalPrice}</td>
<td><button class="btn btn-warning" onclick="editProduct(${count - 1})">Edit</button></td>
<td><button class="btn btn-danger" onclick="deleteProduct(${count - 1})">Delete</button></td>
</tr>`
}
function deleteProduct(index) {
console.log(index)
productList.splice(index, 1)
showProduct();
}
function showProduct() {
document.getElementById('result').innerHTML = ''
for (var i = 0; i < productList.length; i++) {
document.getElementById('result').innerHTML += `<tr>
<td>${i+1}</td>
<td>${productList[i].productName}</td>
<td>${productList[i].manufactureName}</td>
<td>${productList[i].categoryName}</td>
<td>${productList[i].price}</td>
<td>${productList[i].quantity}</td>
<td>${productList[i].totalPrice}</td>
<td><button class="btn btn-warning" onclick="editProduct(${i})">Edit</button></td>
<td><button class="btn btn-danger" onclick="deleteProduct(${i})">Delete</button></td>
</tr>`
}
}
function editProduct(index) {
var product = productList[index]
console.log(product)
document.getElementById('index').value = index
document.getElementById('product_name').value = product.productName
document.getElementById('manuafaturer_name').value = product.manufactureName
changeManufaturer()
document.getElementById('category_name').value = product.categoryName
document.getElementById('price').value = product.price
document.getElementById('quantity').value = product.quantity
document.getElementById('total_price').value = product.totalPrice
}
</script>
</body>
</html>
JS Tutorial
[Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript
