다중 노드선택 방법과 일괄삭제

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>

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)를 모두 삭제