[Java Script] 동적 table row 생성/제거

 

 버튼 클릭 시 동적으로 table row (tr) 생성 및 제거

 

 

 

 

추가 버튼 클릭 시 tr 생성

 

 

Elements를 보면 마지막 row에서 추가된 것을 볼 수 있다.

 

 

삭제 버튼 클릭 시 tr 제거

 

---

 

  <script type='text/javascript'>
 
    var mainTable = document.getElementById('mainTable');
    var mainTableBody = mainTable.getElementsByTagName('tbody')[0];
    var rowCount = mainTableBody.rows.length;
 
    function addRow() {
      rowCount = rowCount + 1;
      // refChild null이어도 마지막 리스트에 추가
      mainTableBody.insertBefore(mainTableBody.rows[0].cloneNode(true), mainTable.rows[rowCount]); 
 
      console.log(rowCount);
    }
 
    function removeRow() {
      if(rowCount < 2) {
        alert("그만 지워");
      } else {
        rowCount = rowCount - 1;
        mainTableBody.deleteRow(rowCount);
      }
      console.log(rowCount);
    }
 
  </script>

 

 

 

 

 Node.insertBefore()

 - 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입한다.

 - var insertedNode = parentNode.insertBefore(newNode, referenceNode);

 

 

 

 참조 : developer.mozilla.org/ko/docs/Web/API/Node/insertBefore

Node.insertBefore() - Web API | MDN