การแก้ไขรายการซื้อในเครื่องคำนวณสินค้า

ตอนนี้มาลองทำการแก้ไขเซลล์กัน ตามเงื่อนไขแล้ว สามารถแก้ไขได้เฉพาะ เซลล์3แรกเท่านั้น

นี่คือเซลล์เหล่านั้น:

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

เห็นได้ชัดว่าโค้ดสำหรับการแก้ไขจะ เหมือนกันสำหรับทุกเซลล์: เมื่อดับเบิลคลิก แทนที่ข้อความในเซลล์ควรมีอินพุตปรากฏขึ้นมา และเมื่อกดEnterในอินพุต เนื้อหาของมันควรกลายเป็นข้อความใหม่ของเซลล์

ผมแนะนำให้สร้างฟังก์ชันบางอย่างที่ รับพารามิเตอร์เป็นเซลล์ของตาราง และผูกความสามารถในการแก้ไขไว้กับมัน:

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

จากนั้นเราก็สามารถนำฟังก์ชันของเราไปใช้ได้ดังนี้ คือ:

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

ผู้อ่านที่ช่างสังเกตอาจสังเกตเห็นว่า เซลล์ทุกเซลล์ไม่เหมือนกัน: เพราะเมื่อเปลี่ยน เซลล์ราคาหรือเซลล์จำนวนควรต้อง เปลี่ยนราคารายการซื้อในคอลัมน์cost และควรคำนวณยอดรวมทั้งหมดใหม่ด้วย

เราเก็บรายละเอียดนี้ไว้เป็นภารกิจย่อยถัดไป เพื่อแก้ไขในบทเรียนหน้า สำหรับตอนเริ่มต้น ให้ทำแค่ความสามารถในการแก้ไข เซลล์สามเซลล์ของเราโดยไม่ต้องคำนวณใหม่

โปรดนำการแก้ไขเซลล์ที่ผมอธิบายไว้ไปใช้