HTML+CSS(실습)

2023-04-19(수) ToDoList

박성하하 2023. 4. 19. 16:29
728x90
반응형

1. addTodo() 

  1-1 newTd1 → innerHTML로 체크박스 생성

  1-2 newTd2 → input text에서 입력되는값을 받아서 value로 넣어줌

  1-3 newTr 즉 <tr>태그에 newTd1,2(td값들)을 넣어줌

  1-4 본문 listBody에 append해줌으로써 새로운 행 추가

 

2. delSelTodo() 

  2-1 box 변수에 className이 btn-chk 즉 모든 체크박스 element를 가져옴

  2-2 체크박스 갯수만큼 for문을 돌림

  2-3 box[i].checked===true 즉 체크된 박스를 listBody.removeChild(listBody.children[i]) 로 제거

       리스트 중 체크된 순서(i번쨰) 에서 true로 remove가 동작하게되며 체크된순서(i번쨰) children이 제거된다.

  2-4 i-- → 마이너스 하지않으면 children이 삭제되면서 내려온 children이 체크가 안되서 마이너스했다.

       ( 1번쨰 children을 삭제하면 2번쨰 childrend이 1번쨰가 되는데 그럼 이녀석이 체크가 안된다)

 

3. delLastTodo()

  3-1 listBody.deleteRow(1) → 마지막 줄 제거

 

4. delAllTodo() 

  4-1 본문 listBody의 텍스트를 "" 즉 공백으로 만듬으로써 모든 tr데이터 제거 

 

 

 

728x90
반응형