TableRow insertCell() 메서드

HTML DOM TableRow 대상

정의와 사용법

insertCell() 메서드는 셀을 현재 행에 삽입합니다。

휴대이를 사용하십시오: deleteCell() 메서드 현재 테이블 행에서 셀을 제거합니다。

추가로 참조하십시오：

HTML 참조 가이드:HTML <tr> 태그

예제

예제 1

id="myRow"의 테이블 행의 시작에 내용을 포함한 새로운 셀을 삽입합니다：

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

직접 시도해보세요

페이지 아래에 더 많은 예제가 제공됩니다。

문법

tablerowObject.insertCell()인덱스)
파라미터 설명
인덱스

파이어폭스와 오퍼라에서는 필수적이며, IE, 크롬 및 사파리에서는 선택적입니다.

숫자 값(0부터 시작), 새 셀이 현재 행에서의 위치를 지정합니다.

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

이 파라미터를 생략하면 IE에서 insertCell()는 마지막 위치에, Chrome 및 Safari에서는 첫 번째 위치에 새 셀을 추가합니다.

기술 세부 사항

반환 값：

삽입된 셀 요소

브라우저 지원

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

더 많은 예제

예제 2

id="myRow"의 테이블 행의 마지막 위치에 내용을 포함한 새 셀을 추가합니다：

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

직접 시도해보세요

예제 3

id="myRow"의 테이블 행의 인덱스 위치 2에 내용을 포함한 새 셀을 추가합니다：

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

직접 시도해보세요

예제 4

첫 번째 테이블 행의 시작에 새 셀을 추가합니다. 테이블의 rows 셋(.rows[0])은 id가 "myTable"인 테이블의 모든 <tr> 요소의 셋을 반환합니다.

숫자 [0]는 검색할 요소를 지정합니다. 이 예제에서는 첫 번째 테이블 행입니다. 그런 다음 우리는 insertcell()를 사용하여 인덱스 위치 -1에 새 셀을 추가합니다：

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

직접 시도해보세요

예제 5

id="myRow"의 테이블 행에서 첫 번째 셀을 제거합니다：

var row = document.getElementById("myRow");
row.deleteCell(0);

직접 시도해보세요

예제 6

테이블의 시작에 새 행을 추가합니다.

insertRow() 메서드는 테이블에서 지정된 인덱스 위치에 새 행을 추가합니다. 이 예제에서는 id="myTable"의 첫 번째 위치(시작)입니다.

그런 다음 우리는 insertCell() 메서드를 사용하여 새 행에 셀을 추가합니다.

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";

직접 시도해보세요

HTML DOM TableRow 대상