Thêm mua sắm mới vào máy tính sản phẩm

Để bắt đầu, hãy làm sao để khi nhấn vào nút, một hàng mới với giao dịch mua được thêm vào bảng:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	let td;
	
	td = document.createElement('td');
	td.textContent = name.value;
	td.classList.add('name');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value;
	td.classList.add('price');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = amount.value;
	td.classList.add('amount');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value * amount.value;
	td.classList.add('cost');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = 'xóa';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Tuy nhiên, giải pháp tôi đưa ra có những vấn đề rõ ràng với việc trùng lặp mã: thực tế là với mỗi ô, chúng ta viết cùng một mã.

Sẽ hợp lý nếu có một hàm nào đó để tạo ô bảng. Hãy để hàm này nhận tham số đầu tiên là tham chiếu đến hàng bảng, tham số thứ hai - văn bản của ô bảng, và thứ ba - tên lớp CSS của ô:

function createCell(tr, value, name) {
	
}

Có hàm như vậy, chúng ta có thể viết lại mã trên như sau:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'xóa', 'remove');
	
	table.appendChild(tr);
});

Hãy triển khai hàm createCell mà tôi đã mô tả.

Sao chép mã của tôi để thêm mua sắm mới. Kiểm tra việc thêm mua sắm mới vào bảng.

Sửa đổi hàm createCell sao cho nó trả về qua return ô bảng đã tạo.