클릭해서 TD 수정하기
본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

클릭해서 TD 수정하기

중요도: 5

셀을 클릭하면 해당 셀을 수정할 수 있게 해주는 테이블을 만들어보세요.

  • ì…€ 클릭 ì‹œ ì…€ 안에 textareaê°€ 나타나면서 셀에 들어 있는 콘텐츠(HTML)를 '수정’할 수 있어야 합니다. 이때 textarea 크기는 기존 cell 크기와 같아야 합니다.
  • ì…€ 수정 ì‹œ ì…€ 아래쪽에 '완료’와 ‘취소’ 버튼이 노출되도록 하고, 각 버튼을 누르면 수정이 종료, 취소될 수 있게 합니다.
  • í•œ 번에 하나의 셀만 수정할 수 있어야 합니다. <td>ê°€ '수정 중’일 때는 다른 셀을 눌러도 클릭 이벤트가 무시되어야 합니다.
  • 테이블엔 더 많은 셀이 추가될 수 있으므로 이벤트 위임을 사용하세요.

데모:

샌드박스를 열어 정답을 작성해보세요.

  1. 셀 클릭 시 셀의 innerHTML을 <textarea>로 교체합니다. 이때 기존 <textarea>는 기존 셀의 크기와 같고, 테두리(border)가 없습니다. 크기 지정엔 자바스크립트를 사용해도 되고, CSS를 사용해도 됩니다.
  2. textarea.value를 td.innerHTML과 같게 설정합니다.
  3. textarea에 포커스를 줍니다.
  4. 셀 아래에 완료, 취소 버튼을 보여주고, 버튼에 적절한 핸들러를 달아줍니다.

샌드박스를 열어 정답을 확인해보세요.