By GokiSoft.com|
14:54 21/10/2020|
Học JS
[Share Code] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript
#vidu.html
<!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>
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
GokiSoft.com
2021-12-01 13:23:05
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quan ly san pham - Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="init()">
<div class="container">
<div class="panel">
<div class="heading">
Input product's detail information
</div>
<div class="body">
<form method="post" onsubmit="return addProduct();">
<div class="form-control">
<label>Product Name: </label>
<input required type="text" name="product_name" id="product_id">
</div>
<div class="form-control">
<label>Manufacturer Name: </label>
<select required name="manufacturer_name" id="manufacturer_id" onchange="changeManufacturer()">
<option value="">-- Select --</option>
</select>
</div>
<div class="form-control">
<label>Category Name: </label>
<select required name="category_name" id="category_id">
<option value="">-- Select --</option>
</select>
</div>
<div class="form-control">
<label>Price: </label>
<input required type="number" name="price" id="price_id" onchange="updatePrice()">
</div>
<div class="form-control">
<label>Quantity: </label>
<input required type="number" name="quantity" id="quantity_id" onchange="updatePrice()">
</div>
<div class="form-control">
<label>Total Price: </label>
<input type="number" name="total_price" id="total_price_id" disabled="true">
</div>
<div class="form-control">
<button type="submit" class="btn-success">Add Product</button>
<button type="reset" class="btn-reset">Reset</button>
</div>
</form>
</div>
</div>
<div class="form-control">
<input type="text" name="search" id="s" placeholder="Search by name" onchange="filter()">
</div>
<div class="panel">
<div class="heading">
Product List Management
</div>
<div class="body">
<table class="table" cellpadding="0" 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>
<tbody id="result"></tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var storeList = [
{
"name": "Apple",
"categories": ["IPhone", "IPad", "IPod"]
}, {
"name": "Samsung",
"categories": ["S1", "S2", "S3"]
}, {
"name": "LG",
"categories": ["L1", "L2", "L3", "L4", "L5"]
}, {
"name": "Google",
"categories": ["G1", "G2", "G3"]
},
]
var productList = []
var manufacturerTag, categoryTag, productTag, priceTag, quantityTag, totalPriceTag
var resultTag
function init() {
categoryTag = document.getElementById('category_id')
productTag = document.getElementById('product_id')
priceTag = document.getElementById('price_id')
quantityTag = document.getElementById('quantity_id')
totalPriceTag = document.getElementById('total_price_id')
manufacturerTag = document.getElementById('manufacturer_id')
resultTag = document.getElementById('result')
for(var item of storeList) {
manufacturerTag.innerHTML += `<option value="${item.name}">${item.name}</option>`
}
console.log("testing...")
json = localStorage.getItem('dataList')
if(json != null && json != '') {
productList = JSON.parse(json)
displayProducts()
}
}
function changeManufacturer() {
manufacturerValue = manufacturerTag.value
categoryList = []
for(var item of storeList) {
if(item.name == manufacturerValue) {
categoryList = item.categories
break
}
}
categoryTag.innerHTML = '<option value="">-- Select --</option>'
for(var v of categoryList) {
categoryTag.innerHTML += `<option value="${v}">${v}</option>`
}
}
function updatePrice() {
price = priceTag.value
quantity = quantityTag.value
totalPriceTag.value = price * quantity
}
function addProduct() {
item = {
'name': productTag.value,
'manufacturer': manufacturerTag.value,
'category_name': categoryTag.value,
'price': priceTag.value,
'quantity': quantityTag.value,
'total_price': totalPriceTag.value
}
// console.log(item)
if(currentIndex >= 0) {
productList[currentIndex] = item
currentIndex = -1
} else {
productList.push(item)
}
// console.log(productList)
displayProducts()
// resultTag.innerHTML += `<tr>
// <th>${productList.length}</th>
// <th>${item.name}</th>
// <th>${item.manufacturer}</th>
// <th>${item.category_name}</th>
// <th>${item.price}</th>
// <th>${item.quantity}</th>
// <th><button>Edit</button></th>
// <th><button>Delete</button></th>
// </tr>`
saveData()
return false;
}
function saveData() {
//B1. Chuyen productList -> JSON (string)
json = JSON.stringify(productList)
console.log(json)
localStorage.setItem('dataList', json)
}
function displayProducts() {
resultTag.innerHTML = ''
index = 0
for(var item of productList) {
resultTag.innerHTML += `<tr>
<th>${index + 1}</th>
<th>${item.name}</th>
<th>${item.manufacturer}</th>
<th>${item.category_name}</th>
<th>${item.price}</th>
<th>${item.quantity}</th>
<th><button onclick="updateItem(${index})">Edit</button></th>
<th><button onclick="deleteItem(${index})">Delete</button></th>
</tr>`
index++
}
}
function filter() {
s = document.getElementById('s').value
resultTag.innerHTML = ''
index = 0
for(var item of productList) {
if(!item.name.includes(s)) {
continue
}
resultTag.innerHTML += `<tr>
<th>${index + 1}</th>
<th>${item.name}</th>
<th>${item.manufacturer}</th>
<th>${item.category_name}</th>
<th>${item.price}</th>
<th>${item.quantity}</th>
<th><button onclick="updateItem(${index})">Edit</button></th>
<th><button onclick="deleteItem(${index})">Delete</button></th>
</tr>`
index++
}
}
var currentIndex = -1
function updateItem(index) {
currentIndex = index
item = productList[index]
manufacturerTag.value = item.manufacturer
categoryTag.value = item.category_name
productTag.value = item.name
priceTag.value = item.price
quantityTag.value = item.quantity
totalPriceTag.value = item.price * item.quantity
}
function deleteItem(index) {
productList.splice(index, 1)
displayProducts()
saveData()
}
</script>
</body>
</html>
#style.css
.container {
width: 640px;
margin: 0px auto;
}
.panel {
display: block;
width: 100%;
border: solid #34b1eb 2px;
margin-bottom: 20px;
}
.panel .heading {
background-color: #34b1eb;
color: white;
padding: 12px;
font-size: 18px;
text-transform: uppercase;
}
.panel .body {
padding: 15px;
}
.form-control {
width: 100%;
}
.panel .body label, .panel .body input, .panel .body select {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
font-size: 16px;
padding: 6px;
}
.btn-success {
font-size: 16px;
background-color: green;
color: white;
border: none;
padding: 10px;
}
.btn-reset {
font-size: 16px;
background-color: red;
color: white;
border: none;
padding: 10px;
}
.table {
width: 100%;
}
.table th, .table td {
border: solid grey 1px;
padding: 6px;
}