Chỉnh sửa mua sắm trong máy tính sản phẩm

Bây giờ hãy thực hiện việc chỉnh sửa các ô. Theo điều kiện, chỉ có thể chỉnh sửa 3 ô đầu tiên.

Đây là chúng:

createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');

Rõ ràng là mã để chỉnh sửa sẽ giống nhau cho mỗi ô: khi nhấp đúp, thay vì văn bản của ô, một trường nhập liệu nên xuất hiện, và khi nhấn Enter trong trường nhập liệu, nội dung của nó sẽ trở thành văn bản mới của ô.

Tôi đề xuất tạo một hàm nào đó, nhận một ô của bảng làm tham số và liên kết khả năng chỉnh sửa vào nó:

function allowEdit(td) {
	td.addEventListener('dblclick', function() {
		
	});
}

Sau đó, chúng ta có thể áp dụng hàm của mình như sau:

allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));

Độc giả tinh ý có thể nhận thấy rằng không phải tất cả các ô đều giống nhau: bởi vì khi thay đổi ô có giá hoặc ô có số lượng, chi phí của mục mua sắm trong cột cost phải thay đổi, và tổng số tiền phải được tính toán lại.

Chúng ta sẽ để sắc thái này như một nhiệm vụ phụ tiếp theo để giải quyết trong bài học sau. Và để bắt đầu, chỉ cần tạo khả năng chỉnh sửa ba ô của chúng ta, không cần tính toán lại.

Hãy thực hiện việc chỉnh sửa các ô như tôi đã mô tả.