[Javascript/Jquery] TABLE 행 추가, 삭제, 체크된 table row 삭제 방법

1. 개요

---

이번 포스팅에서는 테이블의 행의 추가/삭제를 javascript를 활용한 방법과 Jquery를 활용한

방법을 소개하겠습니다. 또한 check에 체크된 테이블의 row삭제하는 방법도 소개합니다.

시작하기에 앞서 기준이 되는 테이블의 내용은 아래와 같습니다.

<table id='testTable' align='center' width='200' border="1px; solid; black">
    <tr>
        <td><input type='button' value="행 추가하기" onClick="addRow();"/></td>
        <td><input type='button' value="행 삭제하기" onClick="delRow();"/></td>    
    </tr>
</table>

테이블의 모양

2. 테이블에 ROW 추가하기

---

테이블에 값 추가하는 방법으로는 Javascript를 활용한 방법과 Jquery를 사용한 방법 2가지를 소개합니다.

<script language="javaScript">
function addRow(){
    // Javascript로 테이블에 행 추가 방법
     var tableData = document.getElementById('testTable');
     var row = tableData.insertRow(tableData.rows.length );
     
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     
     cell1.innerHTML = "<td><input type='checkbox' name='chkbox'></td>";
     cell2.innerHTML = "<td>Javascript</td>";
    
    // Jquery로 테이블에 행 추가 방법
    $("#testTable ").append(
            "<tr><td><input type='checkbox' name='chkbox'></td>"
           +"<td>Jquery</td></tr>");
}
</script>

추가하기 버튼 클릭 후 ( addRow() 함수 호출 후 ) 

기존 테이블에 새로 2개의 행이 추가 된 것을 확인 할 수 있습니다.

Javascript의 경우 innerHTML을 통해서 cell 변수에 값을 넣어주는 방식이고

Jquery의 경우 append() 를통해서 태그를 추가해주는 방식입니다.

3. 테이블의 ROW 삭제

---

<script language="javaScript">
function delRow(){
    // Javascript로 테이블에 행 삭제 방법
      var tableData = document.getElementById('testTable');
    
    if(tableData.rows.length<2) return; // 맨위 row인 버튼이 있는 행을 남기기 위한 조건 문
    tableData.deleteRow(tableData.rows.length-1); // 맨 아래 행 삭제  
    
    // Jquery로 테이블 행 삭제 방법
    if($("#testTable tr").length < 2) return;
    $("#testTable tr:last").remove();
}
</script>

삭제하기 버튼 클릭 후 

추가 된 2개의 행이 삭제된 것을 확인 할 수 있습니다. 

Javascript [본문 6행] 조건에 length를 주었기 때문에 맨 위 버튼 2개는 삭제되지 않고 함수를 리턴킵니다.

[본문 7행] 테이블의 인덱스는 0부터 시작하고 length는 크기를 반환하기 때문에 -1을 해줘서

마지막 행의 인덱스로 접근합니다. 

 

Jquery같은 경우는 선택자를 통해서 해당 테이블의 자손인 tr의 마지막을 찾아서 삭제를 진행합니다.

 

4. 체크 된 ROW 삭제

---

<script language="javaScript">
function delRow(){
    
    // javascript를 사용한 방법
    var tableData = document.getElementById('testTable');
    for(var i = 1 ; i < tableData.rows.length; i ++ ){
        var chkbox = tableData.rows[i].cells[0].childNodes[0].checked ;
        
        if(chkbox){
            tableData.deleteRow(i);
i--;
        }
    }
    
    // jquery를 사용한 방법
    var checkRows = $("[name='chkbox']:checked");
    for(var i =checkRows.length-1;i>-1;i--){                     
        
        checkRows.eq(i).closest('tr').remove();
    }      
}
</script>

둘중 편한 방식을 사용하시면 됩니다.

Javascript의 경우 반복문을 테이블의 rows의 length로 걸었기 때문에 테이블의 row 삭제 후

작아진 length만큼 i의 값을 - 해주기 위해서 [본문 10행] 에서 i--를 실행합니다.