Khoá học lập trình Javascript [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript
- 5.0/5.0
- 2k Đăng ký
- Học lập trình
- Tiếng việt
Thông tin khóa học
<!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>Đăng nhập để làm bài kiểm tra
Chưa có kết quả nào trước đó
Chương trình
Nguyễn Văn An
2026-06-22 11:17:28
Khóa học cực kỳ chất lượng, giảng viên hướng dẫn rất chi tiết và dễ hiểu. Mình đã áp dụng được ngay vào công việc thực tế.
Trần Thị Bích
2026-06-19 11:17:28
Nội dung bài giảng được sắp xếp logic, đi từ cơ bản đến nâng cao. Rất phù hợp cho người mới bắt đầu.
Lê Hoàng Hải
2026-06-17 11:17:28
Khóa học hay, tuy nhiên phần bài tập thực hành hơi khó một chút. Cần phải xem lại video vài lần mới làm được.
Phạm Minh Tuấn
2026-06-10 11:17:28
Tuyệt vời! Đây là khóa học tốt nhất mình từng tham gia. Support nhiệt tình, giải đáp thắc mắc rất nhanh.
Đánh giá
B1. B1. Tạo tài khoản -> Sử dụng để học online
B2. Đăng ký học
B3. Hoàn thành mua khoá học
B4. Thanh toán theo hướng dẫn
B5. Đợi chúng tôi kiểm tra thông tin và thêm bạn vào lớp học
B2. Đăng ký học
B3. Hoàn thành mua khoá học
B4. Thanh toán theo hướng dẫn
B5. Đợi chúng tôi kiểm tra thông tin và thêm bạn vào lớp học
Chào mừng các anh chị và các bạn gia nhập đội ngũ Giảng viên QViet. Anh chị vui lòng đăng ký theo hướng dẫn sau:
Bước 1: Truy cập website https://gozic.vn/teacher/form
Bước 2: Điền thông tin theo yêu cầu. Để bản đăng ký được duyệt nhanh nhất, anh chị hãy điền đủ thông tin nhé.
Bước 3: Click vào "đăng ký ngay" để hoàn thành
Lưu ý:
Link video bài giảng mẫu: Video bài giảng mẫu là căn cứ để Trắc Nghiệm Việt duyệt về hình thức và chất lượng giảng dạy. Vì vậy anh chị hãy điền link này để đăng ký được duyệt nhanh nhất nhé.
Anh chị cũng nên mô tả kỹ về kinh nghiệm giảng dạy để Trắc Nghiệm Việt đánh giá nhé.
Chúc các anh chị và các bạn thành công, sớm gia nhập đội ngũ giảng viên Trắc Nghiệm Việt!
Bước 1: Truy cập website https://gozic.vn/teacher/form
Bước 2: Điền thông tin theo yêu cầu. Để bản đăng ký được duyệt nhanh nhất, anh chị hãy điền đủ thông tin nhé.
Bước 3: Click vào "đăng ký ngay" để hoàn thành
Lưu ý:
Link video bài giảng mẫu: Video bài giảng mẫu là căn cứ để Trắc Nghiệm Việt duyệt về hình thức và chất lượng giảng dạy. Vì vậy anh chị hãy điền link này để đăng ký được duyệt nhanh nhất nhé.
Anh chị cũng nên mô tả kỹ về kinh nghiệm giảng dạy để Trắc Nghiệm Việt đánh giá nhé.
Chúc các anh chị và các bạn thành công, sớm gia nhập đội ngũ giảng viên Trắc Nghiệm Việt!
200,000 VNĐ
999,000 VNĐ
Tổng quan khóa học
- Bài học 40
- Thời gian Linh hoạt
- Mức độ Mới bắt đầu
- Ngôn ngữ Tiếng việt
- Chứng chỉ Không
Trần Văn Điệp
Founder tại QViet.vn