IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript

Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript

by GokiSoft.com - 20:10 29/11/2021 7,535 Lượt Xem

Xây dựng một website như sau


Yêu cầu :

Hoàn thành các chức năng : Thêm, sửa, xoá như hình trên.

Mục manafacturer name -> Chứa danh sách các nhà sản xuất (Apple, SamSung, LG, Sony, Google)

Khi lựa chọn từng danh mục trên thì sẽ xuất hiện trong mục : Category Name tương ứng các loại sản phâm của nhà sản xuất đó

Ví dụ : chọn apple thì category name sẽ xuất hiện IPhone, Ipad, IPod,...

Khi người dùng điện price và quantity thì sẽ tự tính giá trị cho TotalPrice = price * quantity


Bình luận



Chia sẻ từ lớp học

TRẦN VĂN ĐIỆP [Teacher]

Ngày viết: 20:03 27/02/2021


#bt2019.js


//Phan 1: Xu ly Form du lieu
//Item 1: Xu ly du lieu trong Manufacturer Name & Category Name
var dataList = {
	"Apple": ["iPhone", "iPad", "Macbook"],
	"Sam Sung": ["Samsung galaxy 5", "Samsung galaxy 5s"],
	"LG": ["LG01", "LG02"]
}

// Fill du lieu tu dataList -> select (manufacturer name)
var manufacturerTag = document.getElementById('manufacturer_name')
for(m_name in dataList) {
	console.log(m_name)
	manufacturerTag.innerHTML += `<option value="${m_name}">${m_name}</option>`
	// manufacturerTag.innerHTML += '<option value="'+m_name+'">'+m_name+'</option>'
}

var categoryTag = document.getElementById('category_name')
function changeManufacturerName() {
	// Lay ra duoc du lieu vua chon
	var value = manufacturerTag.value
	categoryTag.innerHTML = '<option value="">-- Select --</option>'
	if(value != '') {
		var categoryList = dataList[value]
		for (var i = 0; i < categoryList.length; i++) {
			categoryTag.innerHTML += `<option value="${categoryList[i]}">${categoryList[i]}</option>`
		}
	}
}

// Item 2: Xu ly input
var priceTag = document.getElementById('price')
var quantityTag = document.getElementById('quantity')
var totalPriceTag = document.getElementById('total_price')
function updateTotalPrice() {
	price = priceTag.value
	quantity = quantityTag.value

	totalPriceTag.value = price * quantity
}

// Phan 2: Xu ly them/sua/xoa san pham
var productList = [] //Chua tat ca cac san pham => thuc hien add hien thi len table
var productNameTag = document.getElementById('product_name')
var resultTag = document.getElementById('result')
var currentIndex = -1
function addProduct() {
	productName = productNameTag.value
	price = priceTag.value
	quantity = quantityTag.value
	totalPrice = totalPriceTag.value
	manufacturerName = manufacturerTag.value
	categoryName = categoryTag.value

	var product = {
		'productName': productName,
		'manufacturerName': manufacturerName,
		'categoryName': categoryName,
		'price': price,
		'quantity': quantity,
		'totalPrice': totalPrice,
	}

	if(currentIndex >= 0) {
		productList[currentIndex] = product
		currentIndex = -1
		saveBtn.innerHTML = 'Add Product'
	} else {
		productList.push(product)
	}

	console.log(product)

	// resultTag.innerHTML += `<tr>
	// 						<td>${productList.length}</td>
	// 						<td>${product.productName}</td>
	// 						<td>${product.manufacturerName}</td>
	// 						<td>${product.categoryName}</td>
	// 						<td>${product.price}</td>
	// 						<td>${product.quantity}</td>
	// 						<td><button onclick="editItem(${productList.length-1})">Edit</button></td>
	// 						<td><button onclick="deleteItem(${productList.length-1})">Delete</button></td>
	// 					</tr>`
	showData()

	// Xoa du lieu di
	// document.getElementById('reset_btn').click()
	resetData()
}

function resetData() {
	productNameTag.value = ''
	priceTag.value = ''
	quantityTag.value = ''
	totalPriceTag.value = ''
	manufacturerTag.value = ''
	categoryTag.value = ''
}

function deleteItem(index) {
	console.log(index)
	productList.splice(index, 1)
	
	showData()
}

function showData() {
	//Hien thi lai danh sach san pham trong table
	resultTag.innerHTML = ''

	for (var i = 0; i < productList.length; i++) {
		product = productList[i]
		resultTag.innerHTML += `<tr>
							<td>${i + 1}</td>
							<td>${product.productName}</td>
							<td>${product.manufacturerName}</td>
							<td>${product.categoryName}</td>
							<td>${product.price}</td>
							<td>${product.quantity}</td>
							<td><button onclick="editItem(${i})">Edit</button></td>
							<td><button onclick="deleteItem(${i})">Delete</button></td>
						</tr>`
	}
}

var saveBtn = document.getElementById('save_btn')
function editItem(index) {
	currentIndex = index

	productNameTag.value = productList[index].productName
	priceTag.value = productList[index].price
	quantityTag.value = productList[index].quantity
	totalPriceTag.value = productList[index].totalPrice
	manufacturerTag.value = productList[index].manufacturerName

	changeManufacturerName()

	categoryTag.value = productList[index].categoryName

	saveBtn.innerHTML = 'Update Product'
}


#style.css


.container {
	width: 640px;
	margin: 0px auto;
}

.panel {
	width: 100%;
	border: solid #21adf0 2px;
	margin-bottom: 20px;
}

.panel-heading {
	background-color: #21adf0;
	color: white;
	font-weight: bold;
	padding: 6px;
}

.panel-body {
	display: block;
}

.panel-body label, .panel-body input, .panel-body select, .panel-body .form-group {
	display: block;
	width: 96%;
	font-size: 16px;
	margin: 0px auto;
	margin-bottom: 6px;
}

.panel-body label {
	font-weight: bold;
}

.panel-body table {
	width: 96%;
	margin: 0px auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

table, th, td {
	border: solid #c0bfbf 1px;
}

th, td {
	padding: 5px;
}


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>Quan ly san pham - page</title>
	<meta charset="utf-8">
	<!-- code css -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="panel">
			<div class="panel-heading">
				Input Product's Detail Information
			</div>
			<div class="panel-body">
				<form method="post" id="MyForm">
					<label>Product Name: </label>
					<input type="text" id="product_name">

					<label>Manufacturer Name: </label>
					<select id="manufacturer_name" onchange="changeManufacturerName()">
						<option value="">-- Select --</option>
					</select>

					<label>Category Name: </label>
					<select id="category_name">
						<option value="">-- Select --</option>
					</select>

					<label>Price: </label>
					<input type="number" id="price" onkeyup="updateTotalPrice()">

					<label>Quantity: </label>
					<input type="number" id="quantity" onkeyup="updateTotalPrice()">

					<label>Total Price: </label>
					<input type="number" id="total_price" disabled="true">

					<div class="form-group">
						<button type="button" onclick="addProduct()" style="margin-left: 0px !important;" id="save_btn">Add Product</button>
						<button type="reset" id="reset_btn">Reset</button>
					</div>
				</form>
			</div>
		</div>
		<div class="panel">
			<div class="panel-heading">
				Product List Management
			</div>
			<div class="panel-body">
				<table border="1" 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>

	<!-- code js -->
	<script type="text/javascript" src="bt2019.js"></script>
</body>
</html>


Do Trung Duc [T2008A]

Ngày viết: 09:35 26/10/2020



<!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="">
					<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" onkeyup="updateTotalPrice()">
				</div>
				<div class="form-group">
					<label>Quantity:</label>
					<input class="form-control" type="text" name="quantity" id="quantity" placeholder="Enter quantity" 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">
				</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" id="result">
				<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>
				</tbody>
			</table>
		</div>
	</div>
<script type="text/javascript">
	var manufactureList = {
		"Apple": ["Iphone 5", "Iphone 7", "Iphone 12"],
		"Samsung": ["Galaxy 5", "Galaxy 10"],
		"LG": ["Xperia Z1", "Xperia Z2", "Xperia Z3"],
		'ABC':null
	}

	var productList = []

	var manuafaturerTag = document.getElementById('manuafaturer_name')

		for (var key in manufactureList) {
			manuafaturerTag.innerHTML += `<option value='${key}'>${key}</option>`
		}

function changeManufaturer(){
	key = document.getElementById('manuafaturer_name').value
	categoryList = manufactureList[key]

	var categoryTag = document.getElementById('category_name')
	categoryTag.innerHTML = ''
	if (categoryList != null) {
		for (var i =0; i < categoryList.length; i++) {
			categoryTag.innerHTML += `<option value='${categoryList[i]}'>${categoryList[i]}</option>`
		}
	}
}

function updateTotalPrice(){
	var price = document.getElementById('price').value
	var quantity = document.getElementById('quantity').value
	var totalPrice = price*quantity
	document.getElementById('total_price').value = totalPrice
}

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
	}

	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 onclick="editProduct(${count-1})">Edit</button></td>
				<td><button onclick="deleteProduct(${count-1})">Delete</button></td>
	</tr>`
}

function  deleteProduct(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 onclick = "editProduct(${i})">Edit</button></td>
				<td><button onclick="deleteProduct(${i})">Delete</button></td>
				</tr>`
			}
		}

function editProduct(index){
	var product = productList[index]
	document.getElementById('product_name').value = product.productName
	document.getElementById('manuafaturer_name').value = product.manufactureName
	changeManufaturer()
	document.getElementById('category_name').value =product.productName
	document.getElementById('price').value=product.price
	document.getElementById('quantity').value=product.quantity
	document.getElementById('total_price').value=product.totalPrice
	document.getElementById('index').value=index
}


</script>

	</body>
</html>



Nguyễn Anh Vũ [T2008A]

Ngày viết: 13:10 24/10/2020


#qlsp.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>


Nguyễn Xuân Mai [T2008A]

Ngày viết: 11:37 24/10/2020



<!DOCTYPE html>
<html>
<head>
	<title>Quan ly san pham</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="5" style="border-color: blue">
		<tr style="background-color: blue; color: white; text-align: left;"><th>Input product's detail information</th></tr>
		<tr ><td>
			<label>Product Name></label>
			<br>
			<input type="number" name="index" id="index" value="" hidden="true">
			<input type="text" name="product" id="product" style="background-color: #f5dec1; width: 700px">
			<br>
			<label>Manufacturer Name</label>
			<br>
			<select id="mname" onchange="changemanuf()">
				<option>-- Manufacturer --</option>
			</select>
			<br>
			<label>Category Name</label>
			<br>
			<select id="category"></select>
			<br>
			<label>Price</label>
			<br>
			<input type="text" name="price" id="price" style=" width: 700px" onkeyup="updateTotalPrice()">
			<br>
			<label>Quantity</label>
			<br>
			<input type="text" name="quantity" style=" width: 700px" id="quantity" onkeyup="updateTotalPrice()">
			<br>
			<label>Total Price</label>
			<br>
			<input type="text" name="product" id="totalprice" style="background-color: #ccc8be; width: 700px">
			<br>
			<button class="btn btn-success" type="button" onclick="addPro()">Add Product</button>
			<button class="btn btn-danger" type="reset" onclick="reset()">Reset</button>
		</td></tr>
	</table>
	<br>
	<table border="1" cellspacing="0" cellpadding="3">
		<tr style="background-color: blue; color: white; text-align: left;"><th>Management Products</th></tr>
		<tr><td>
			<table border="1" 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>
			</tr>
			</thead>
			<tbody id="result">
			</tbody>
		</table>
		</td></tr>
	</table>

	<script type="text/javascript">
		var manufactureList = {
			"Apple": [
				"IPhone", "IPad", "IPod"
			],
			"Samsung": [
				"Galaxy S5", "Galaxy 10"
			],
			"LG": [
				"Television", "Laptop", "Fridge"
			],
			"Sony": [
				"Television", "Playstation", "Camera"
			],
			"Google": [
				"Pixel", "Stadia", "Nest"
			]
		}

		var productList = []

		var manuafaturerTag = document.getElementById('mname')
		for(var key in manufactureList) {
			manuafaturerTag.innerHTML += `<option value='${key}'>${key}</option>`
		}

		function changemanuf() {
			key = manuafaturerTag.value
			categoryList = manufactureList[key]
			console.log(categoryList)

			var categoryTag = document.getElementById('category')
			categoryTag.innerHTML = ''

			if(categoryList != null) {
				for (var i = 0; i < categoryList.length; i++) {
					categoryTag.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('totalprice').value = totalprice
		}

		var count = 0;

		function addPro() {
			var index = document.getElementById('index').value
			var productName = document.getElementById('product').value
			var manufactureName = document.getElementById('mname').value
			var categoryName = document.getElementById('category').value
			var price = document.getElementById('price').value
			var quantity = document.getElementById('quantity').value
			var totalPrice = document.getElementById('totalprice').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').value = product.productName
			document.getElementById('mname').value = product.manufactureName
			changemanuf()
			document.getElementById('category').value = product.categoryName
			document.getElementById('price').value = product.price
			document.getElementById('quantity').value = product.quantity
			document.getElementById('totalprice').value = product.totalPrice
		}

		function reset(){
        	document.getElementById('product').value=''
        	document.getElementById('mname').value='--Manufacturer--'
        	document.getElementById('category').value=''
        	document.getElementById('price').value=''
        	document.getElementById('quantity').value=''
        	document.getElementById('totalprice').value=''
        }
	</script>
</body>
</html>


hainguyen [T2008A]

Ngày viết: 17:17 21/10/2020


#BT.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.poin {
			width: 70%;
			margin: 0 auto;
			border: solid 1px;
			margin-top: 20px;
		}
		.poinding {
			background-color: #4267b2;
			color: white;
			padding: 10px;
		}
		.pointer {
			padding: 15px;
		}
		.pointer label{
			font-weight: bold;
		}
		.first {
			display: block;
			margin-top: 15px;
		}
		.secon {
			display: block;
			width: 98%;
			font-size: 16px;
			margin-top: 10px;
		}
		.table {
			width: 100%;
		}
		.table tr {
			border-bottom: solid 1px;
		}
	</style>
</head>
<body>
	<div class="poin">
		<div class="poinding">
			Input product detall information
		</div>
		<div class="pointer">
			<form method="pas">
				<div class="first">
					<label>Product Name:</label>
					<input type="number" name="index" id="index" value="" hidden="true">
					<input class="secon" type="text" name="product_name" id="product_name" placeholder="Enter product name">
				</div>
				<div class="first">
					<label>Manufacturer Name:</label>
					<select class="secon" id="manufacturer_name" onchange="changeManufacturer()">
						<option value="">-- Choose --</option>
					</select>
				</div>
				<div class="first">
					<label>Category Name:</label>
					<select class="secon" id="category_name"></select>
				</div>
				<div class="first">
					<label>Price:</label>
					<input class="secon" type="number" name="price" id="price" placeholder="Enter price" value="0" onkeyup="updateTotalPrice()">
				</div>
				<div class="first">
					<label>Quantity:</label>
					<input class="secon" type="text" name="quantity" id="quantity" placeholder="Enter quantity" value="" onkeyup="updateTotalPrice()">
				</div>
				<div class="first">
					<label>Tatal Price:</label>
					<input class="secon" type="text" name="total_price" id="total_price" value="0" disabled="true">
				</div>
				<div class="first">
					<button class="btn-one" type="button" onclick="addProduct()">Add Produce</button>
					<button class="btn-two" type="reset">Reset</button>
				</div>
			</form>
		</div>
	</div>
	<div class="poin">
		<div class="poinding">
			Product List
		</div>
		<div class="pointer">
			<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 manufactureLish = {
			"Apple": ["Iphone 5", "Iphone 5s", "Iphone 11max"],
			"Samsung": ["Galaxy s5", "Galaxy A7"],
			"LG": ["1", "2", "3"]
		}
		var productLish = []

		var manufactureTag = document.getElementById('manufacturer_name')
		for(var key in manufactureLish) {
			manufactureTag.innerHTML += `<option value = '${key}'>${key}</option>`
		}

		function changeManufacturer() {
			key = manufactureTag.value
			categoryLish = manufactureLish[key]
			console.log(categoryLish)

			var categoryTag = document.getElementById('category_name')
			categoryTag.innerHTML = ''

			if(categoryLish != null) {
				for(var i = 0; i < categoryLish.length; i++) {
					categoryTag.innerHTML += `<option value = '${categoryLish[i]}'>${categoryLish[i]}</option>`
				}
			}
		}

		function updateTotalPrice() {
			var price = document.getElementById('price').value
			var quantity = document.getElementById('quantity').value

			totalPrice = price * quantity

			document.getIlementById('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('manufacturer_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 != '') {
				productLish[index] = product
				showProduct()
				return;
			}

			productLish.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-one" onclick="editProduct(${count-1})">Edit</button></td>
			<td><button class="btn-two" onclick="deleteProduct(${count-1})">Delete</button></td>
			</tr>`
		}

		function deleteProduct(index) {
			console.log(index)
			productLish.splice(index, 1)
			showProduct();
		}

		function showProduct() {
			document.getElementById('result').innerHTML = ''

			for (var i = 0; i < productLish.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 = productLish[index]
			console.log(product)
			document.getElementById('index').value = index
			document.getElementById('product_name').value = product.productName
			document.getElementById('manufacturer_name').value = product.manufactureName
			changeManufacturer()
			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>


Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!