위 화면과 같이 To Do List를 만들어보자.
(css는 이 포스트에서 다루지 않고 기능적인부분(javascript)만 정리.)
[ 기능 ]
빈 칸에 내용을 작성하고 '추가'를 누르면, 그 내용을 아래쪽 표에 추가.
체크 한 후 '선택삭제'를 누르면, 체크한 항목만 삭제.
'마지막 항목 삭제'를 누르면, 마지막 항목 삭제.
'전체 삭제'를 누르면, 리스트 전체 삭제.
colgroup을 사용하여, 각 column의 너비를 설정.
|
document .getElementById('btnAdd') .addEventListener('click',addList); #btnAdd를 눌렀을 때, addList함수를 실행함. function addList( ) contents == .text-basic 선택 if(contents의 value값이 없을 때) ==빈칸에 아무런 내용이 없을때, '내용을 입력하세요' 알림창 실행. 빈칸에 focus. (입력값이 있을 경우) to do lis(#listBody)에 있는 체크박스와 텍스트를 동일한 유형으로 입력. appendChild를 사용하여 마지막항목으로 삽입. |
.addEventListner('click', fnc);
onclick = "fnc()" 과 똑같은 기능.
javascript에서 함수를 불러올 때 사용.
.querySelector(선택할요소);
요소 선택.
list == #listBody를 가져옴 listChild == #listBody의 하위요소들을 모두 가져옴. function delSel( ) checkbox == .btn-chk(체크박스) 모두 가져옴. for-each문 if(i번째 박스가 체크되어있음) 체크박스의 부모요소의 부모요소(tr)를 삭제 function delLast( ) list의 마지막 요소를 삭제. function delAll( ) for문 listChild 제거 //listChild[0]을 제거한 후, i--라는 조건이 없다면, i=1로 실행시, listChild[0]: 'javascript공부하기' listChild[1]: '운동하기'가 되므로, 'javascript공부하기'는 삭제되지않음. |
.querySelectorAll(선택요소);
선택한 요소 모두 선택.
JavaScript :: this (0) | 2020.07.29 |
---|---|
JavaScript :: 객체 (0) | 2020.07.28 |
JavaScript :: 요소 추가하기 (create..., appendChild) (0) | 2020.07.22 |
JavaScript :: 자식요소, 부모요소 가져오기 (0) | 2020.07.21 |
JavaScript :: input _ value값 가져오기 (0) | 2020.07.03 |
댓글 영역