Table insertRow() 메서드

HTML DOM Table 객체

정의 및 사용법

insertRow() 메서드는 빈 <tr> 요소 그리고 테이블에 추가합니다.

insertRow() 메서드는 테이블의 지정된 인덱스 위치에 새 행을 삽입합니다.

주의:<tr> 요소는 <th> 또는 <td> 요소를 포함해야 합니다.

ヒント:이를 사용하세요 deleteRow() 메서드 행 제거.

또한 참조:

HTML 참조 매뉴얼:HTML <tr> 태그

예제

예제 1

테이블의 첫 번째 위치에 새 행 삽입(내용이 있는 <td> 요소 삽입):

// id="myTable"의 <table> 요소 찾기:
var table = document.getElementById("myTable");
// 빈 <tr> 요소를 생성하고 테이블의 첫 번째 위치에 추가:
var row = table.insertRow(0);
// "새" <tr> 요소의 첫 번째와 두 번째 위치에 새 셀(<td> 요소) 삽입:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// 새 셀에 텍스트 추가:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

직접 시험해 보세요

예제 2

행 생성 및 제거:

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

직접 시험해 보세요

문법

tableObject.insertRow(index)
파라미터 설명
index

Firefox와 Opera에서는 필수적이지만, IE, Chrome 및 Safari에서는 선택적입니다.

숫자는 삽입할 행의 위치를 정의합니다(0부터 시작). 값 0은 새 행이 첫 번째 위치에 삽입됩니다.

도 -1 값을 사용할 수 있으며, 이는 마지막 위치에 새 행을 삽입하게 합니다.

이 매개변수를 생략하면 Chrome, IE, Firefox, Opera에서의 마지막 위치와 Safari에서의 첫 번째 위치에 insertRow()가 새 행을 삽입합니다.

기술적인 세부 사항

반환 값: 삽입된 <tr> 요소.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML DOM Table 객체