제품 계산기에서 구매 항목 편집

이제 셀 편집 기능을 구현해 봅시다. 조건에 따라 처음 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 열의 구매 비용과 총 합계가 재계산되어야 하기 때문입니다.

이 세부 사항은 다음 강의에서 해결할 다음 하위 작업으로 남겨두겠습니다. 먼저 재계산 없이 세 셀의 편집 기능을 만들어 봅시다.

제가 설명한 셀 편집 기능을 구현하세요.