Máy tính sản phẩm bằng JavaScript

Trong phần này, chúng ta sẽ triển khai một máy tính sản phẩm. Nó sẽ là một bảng, nơi người dùng trang web của chúng ta có thể nhập các mua hàng của họ.

Giả sử các mua hàng được nhập thông qua biểu mẫu. Ngoài ra, đối với mỗi sản phẩm, chúng ta sẽ cung cấp một liên kết để xóa. Chúng ta cũng sẽ tạo khả năng chỉnh sửa tên, giá và số lượng sản phẩm. Hãy để việc chỉnh sửa như vậy diễn ra bằng cách nhấp đúp vào ô của bảng.

Hãy để tổng chi phí sản phẩm được hiển thị bên dưới bảng. Hãy đảm bảo rằng tổng này được tính lại khi xóa và khi chỉnh sửa sản phẩm.

Đây là mẫu của những gì sẽ đạt được:

Đây là mã HTML/CSS mà bạn có thể sử dụng khi giải quyết nhiệm vụ:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="tên">
		<input id="price" placeholder="giá">
		<input id="amount" placeholder="số lượng">
		<input id="add" type="button" value="thêm">
	</div>
	
	<h2>Bảng sản phẩm:</h2>
	<table id="table">
		<tr>
			<th>tên</th>
			<th>giá</th>
			<th>số lượng</th>
			<th>tổng</th>
			<th>xóa</th>
		</tr>
	</table>
	<div id="result">
		tổng cộng: <span id="total">0</span>
	</div>
</div>

* {
	box-sizing: border-box;
}
#parent {
	margin: 0 auto;
	width: 500px;
}

#form {
	display: flex;
	margin-bottom: 15px;
}
#form input {
	padding: 8px;
	width: 24%;
	margin: 0 0.5% 10px 0.5%;
}

h2 {
	margin-top: 0;
	margin-bottom: 7px;
}

#table {
	width: 100%;
	margin-bottom: 10px;
}
#table td, #table th {
	padding: 8px;
	text-align: center;
	border: 1px solid black;
}
#table td.remove {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
#table td.remove:hover {
	text-decoration: none;
}

#result {
	text-align: right;
	margin-right: 10px;
}

Ngay bây giờ, hãy lấy tham chiếu đến tất cả các thẻ cần thiết vào các biến:

let name   = document.querySelector('#name');
let price  = document.querySelector('#price');
let amount = document.querySelector('#amount');
let add    = document.querySelector('#add');
let table  = document.querySelector('#table');
let total  = document.querySelector('#total');

Hãy sao chép các đoạn mã tôi đã cung cấp vào dự án của bạn.