-
다중 노드선택 방법과 일괄삭제javascript ES5 정리 2020. 9. 30. 12:31
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src = "index.js"></script> </head> <body> <section id="section9"> <h1>Ex9-다중 노드선택 방법과 일괄삭제</h1> <div> <input type="button" class="del-button" value="일괄 삭제" /> </div> <table border="1" class="notice-list"> <thead> <tr> <td><input class="overall-checkbox" type="checkbox"></td> <td>번호</td> <td>제목</td> <td>작성일</td> <td>작성자</td> <td>조회수</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1</td> <td><a href="1">자바스크립트란..</a></td> <td>2019-01-25</td> <td>newlec</td> <td>2</td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td><a href="2">유투브에 끌려다니지 않으려고 했는데....ㅜㅜ..</a></td> <td>2019-01-25</td> <td>newlec</td> <td>0</td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td><a href="3">기본기가 튼튼해야....</a></td> <td>2019-01-25</td> <td>newlec</td> <td>1</td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td><a href="4">근데 조회수가 ㅜㅜ..</a></td> <td>2019-01-25</td> <td>newlec</td> <td>0</td> </tr> </tbody> </table> </section> </body> </html>js
window.addEventListener("load", function(){ var section = document.querySelector("#section9"); var noticeList =section.querySelector(".notice-list"); var tbody = noticeList.querySelector("tbody"); var allCheckbox = section.querySelector(".overall-checkbox"); var delButton = section.querySelector(".del-button"); allCheckbox.onchange = function(){ var temp = tbody.querySelectorAll("input[type='checkbox']"); if(allCheckbox.checked==true) { for(var i=0;i<temp.length;i++) { temp[i].checked = true; } } else{ for(var i=0;i<temp.length;i++) { temp[i].checked = false; } } }; delButton.onclick = function(){ var deltemp = tbody.querySelectorAll("input[type='checkbox']:checked"); for(var i =0;i<deltemp.length;i++) { deltemp[i].parentElement.parentElement.remove(); } }; });모든 노드 선택
1.input 객체의 checkbox type을 temp에 담아둔다.
2.allCheckbox가 체크가 되있다면 모든 input의 checkbox를 true로 변환
3.allCheckbox가 체크가 해재되었다면 모든 input의 checkbox를 false로 변환
선택 노드 삭제
check가 된 input객체들의 부모의 부모(즉 input의 부모 td , td의 부모 tr)를 모두 삭제
'javascript ES5 정리' 카테고리의 다른 글
익명,선언적 함수 (0) 2022.06.09 노드 자리 교체 (0) 2020.09.30 노드 삽입(insertBefore, insertAdjacentElement), 노드 순회(firstChild, previousSibli) (0) 2020.09.29 노드 복제 cloneNode (0) 2020.09.29 엘리먼트 노드 추가/삭제 (0) 2020.09.29