클릭해서 TD 수정하기
중요도: 5
셀을 클릭하면 해당 셀을 수정할 수 있게 해주는 테이블을 만들어보세요.
- 셀 클릭 시 셀 안에 textarea가 나타나면서 셀에 들어 있는 콘텐츠(HTML)를 '수정’할 수 있어야 합니다. 이때 textarea 크기는 기존 cell 크기와 같아야 합니다.
- 셀 수정 시 셀 아래쪽에 '완료’와 ‘취소’ 버튼이 노출되도록 하고, 각 버튼을 누르면 수정이 종료, 취소될 수 있게 합니다.
- 한 번에 하나의 셀만 수정할 수 있어야 합니다.
<td>가 '수정 중’일 때는 다른 셀을 눌러도 클릭 이벤트가 무시되어야 합니다. - 테이블엔 더 많은 셀이 추가될 수 있으므로 이벤트 위임을 사용하세요.
데모:
- 셀 클릭 시 셀의
innerHTML을<textarea>로 교체합니다. 이때 기존<textarea>는 기존 셀의 크기와 같고, 테두리(border)가 없습니다. 크기 지정엔 자바스크립트를 사용해도 되고, CSS를 사용해도 됩니다. textarea.value를td.innerHTML과 같게 설정합니다.- textarea에 포커스를 줍니다.
- 셀 아래에 완료, 취소 버튼을 보여주고, 버튼에 적절한 핸들러를 달아줍니다.