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 [Teacher]
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;
}