By GokiSoft.com| 21:31 01/12/2021|
Học JS

[Share Code] 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

#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="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...")
	}

	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>`

		return false;
	}

	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++
		}
	}

	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()
	}
</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;
}


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)