노드 자리 교체

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");
    var swapButton = section.querySelector(".swap-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;
            }
        }
       
       
    };


    swapButton.onclick = function(){
        var chtemp = tbody.querySelectorAll("input[type='checkbox']:checked");
        if(chtemp.length!=2)
        {
            alert("2개만 선택하세요.");
        }
        else
        {
            var trs = [];
            for(var i =0;i<chtemp.length;i++)
            {
                trs.push(chtemp[i].parentElement.parentElement);
            }


            var cloneNode1 = trs[0].cloneNode(true); //trs[0] 번을 복제한다.
            trs[1].replaceWith(cloneNode1); // trs[1] 번과 복제내용을 교체한다.
            trs[0].replaceWith(trs[1]); 

        }
        
    };

});

 

 

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");
    var swapButton = section.querySelector(".swap-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;
            }
        }
       
       
    };


    swapButton.onclick = function(){
        var chtemp = tbody.querySelectorAll("input[type='checkbox']:checked");
        if(chtemp.length!=2)
        {
            alert("2개만 선택하세요.");
        }
        else
        {
            var trs = [];
            for(var i =0;i<chtemp.length;i++)
            {
                trs.push(chtemp[i].parentElement.parentElement);
            }


            var cloneNode1 = trs[0].cloneNode(true); //trs[0] 번을 복제한다.
            trs[1].replaceWith(cloneNode1); // trs[1] 번과 복제내용을 교체한다.
            trs[0].replaceWith(trs[1]); 

        }
        
    };

});

 

교체 원리

 

1

 

2

3