[JavaScript] 버튼을 눌러서 표 행 열 추가하기

출처는 SeSAC 웹 풀스택 과정에서 배운 JS 실습입니다. 

 

JS 실습을 하면서 꽤 유용한...? 메서드를 알게 된 것 같아서 정리해본다.

작성자와 내용을 적고 작성 버튼을 누르게 되면 표에 행이 삽입 되는 것이다. 

DOM요소를 배웠기에 createElement와 appendChild( )를 이용해 넣었지만 나는 구글링을 해서 다르게 코드를 넣어봤다. 

<문제>

1. 어떻게 열과 행을 삽입할 것 인가.

2. 번호는 어떻게 자동으로 ++ 할것인가.

 

1. HTML 코드

<button type="button" id="btn" onclick="addTbl()">작성</button>
<table border="1" cellpadding="10">
  <thead>
    <tr>
      <th>번호</th>
      <th>작성자</th>
      <th>내용</th>
      <th>작성일</th>
    </tr>
  </thead>
  <tbody id="tbl"></tbody>
</table>

버튼을 누르면 addTbl( ) 함수가 작동하게 만들었다.

2. JS 코드 addTbl( )

<script>
  function addTbl() {
    // 작성자
    let writer = document.querySelector("#writer").value;
    // 내용
    let content = document.getElementById("content").value;
    // 작성일
    let today = new Date();
    let year = today.getFullYear();
    let month = today.getMonth();
    let date = today.getDate();
    let hours = today.getHours();
    let minutes = today.getMinutes();

    // 테이블 행, 열 추가하기
    let table = document.getElementById("tbl");
    let newRow = table.insertRow(); // 테이블 행 추가
    let newCell1 = newRow.insertCell(0); // 테이블 4개의 열 추가
    let newCell2 = newRow.insertCell(1);
    let newCell3 = newRow.insertCell(2);
    let newCell4 = newRow.insertCell(3);

    // tr 개수 세서.. 자동으로 번호 ++
    let trObj = document.getElementsByTagName("tr");

    // 표에 데이터 넣기
    newCell1.innerText = trObj.length - 1;
    newCell2.innerText = writer;
    newCell3.innerText = content;
    newCell4.innerText = year + " - " + month + " - " + date + " " + hours + " : " + minutes;
  }
</script>

1. 검색을 해보니 insertRow와 insertCell이 있었다. (테이블에 열과 행추가!!)
2. 그래서 insertRow와 insertCell을 이용해서 조금 더 쉽게 할 수 있었다..! 만만세..!
3. 2번째 문제는 tr개수(row)개수를 어떻게 셀까 고민해서 tr 태그를 TagName으로 해서 원래 기본 행에서 -1 해주는 식으로 ++ 했다. 
4. 약간 잔머리 써서 한 것 같긴 한데..  전역변수로 해서 사용할 수 있을 것도 같다..!