[자바스크립트] html table 태그 행(tr) 개수 파악 방법(+ 전체 행 삭제)

자바스크립트만으로 table태그의 행 갯수를 파악하고, 특정 행이나 전체 행을 삭제할 수 있다.

 

# HTML table 행 갯수 파악 방법

:  table태그.rows.length   

 

[HTML코드] table 태그의 id 값을 'myTable'로 주었다.

<table id='myTable'>
  <tr>
    <th>항목</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>1,000</td>
  </tr>
  <tr>
    <td>귤</td>
    <td>500</td>
  </tr>
</table>

 

[Javascript코드] table태그를 취득 후, 행의 개수를 숫자로 출력한다.

const $table = document.getElementById('myTable'); // table 엘리먼트 취득

console.log($table.rows.length);  // 3, 행 갯수 출력

 

테이블의 행을 삭제할 때, 아래와 같이 활용할 수 있다.

 

# HTML table 행 전체 삭제 방법

:  table태그.deleteRow(인덱스)  

for(let i=0; i <= $table.rows.length; i++){
  $table.deleteRow(-1);
}

테이블 행의 갯수만큼 반복하며, 마지막 행을 삭제하는 코드이다.

물론 이 외에도 다양한 방법이 있을 수 있다.

($table.innerHTML 값을 설정 하는 등...)

 

deleteRow() 메서드는 테이블의 행을 삭제하는 메서드다.

인자값으로 삭제할 행의 인덱스를 받는다.(0부터 시작)

-1을 입력하면 마지막 행을 삭제한다.

 

 

(참고) 자바스크립트로 html table 행 추가, 삭제 방법

curryyou.tistory.com/206