By GokiSoft.com| 23:55 30/10/2021|
Học JS

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





<!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)