테이블(table)에 줄(row: tr)을 삽입하고 rows 컬렉션에 줄을 삽입한다.
tFoot, tBody, or tHead에 줄을 삽입하면, table의 rows 컬렉션에도 줄이 추가되어야 한다.
테이블에 줄이 삽입되면, tBody 개체의 rows 컬렉션에도 새로운 줄이 추가되어야 한다.
인덱스 iIndex가 지정되면 그 인수는 그 엘레멘트의 tr로 시작되는 rows 컬렉션에 상대적이어야 한다.
예를들어 tBody를 위하여 이 메서드를 호출하려면, 인덱스값을, table이 아니라, tBody의 rows 컬렉션에 상대적인 값으로 지정하여야 한다.
줄의 삽입은 rows 컬렉션의 제일 뒤에 추가하는 것이 바랍직하다. 이 방식이 줄을 중간에 삽입하는 것보다 빠르다. 줄을 컬렉션의 제일 뒤에 삽입하려면, 값을 디폴트인 -1로 설정하거나, 컬렉션의 길이에서 1을 뺀 위치로 지정하면 된다.
| 개체 | script | IE |
|---|
이 메서드는 (영어)DOM Level 1(Document Object Model Level 1)에서 정의되었다.
| 예제 칸1-1 | 예제 칸1-2 |
| 예제 칸2-1 | 예제 칸2-2 |
| 예제 칸3-1 | 예제 칸3-2 |
insertRow 메서드로 table에 줄(tr)을 삽입하고, deleteRow 메서드로 줄을 삭제한다.
<TABLE id=tableObj border=1 width=600>
<TR id=row1>
<TD id=cell11>예제 칸1-1</TD>
<TD id=cell12>예제 칸1-2</TD>
</TR>
<TR id=row2>
<TD id=cell21>예제 칸2-1</TD>
<TD id=cell22>예제 칸2-2</TD>
</TR>
<TR id=row3>
<TD id=cell31>예제 칸3-1</TD>
<TD id=cell32>예제 칸3-2</TD>
</TR>
</TABLE>
<SCRIPT>
function makeRow(){
newTr=tableObj.insertRow(document.createElement('<TR>'));
newTd=newTr.insertCell(document.createElement('<TD>'));
newTd.innerText='생성, 삽입된 줄-칸1';
newTd=newTr.insertCell(document.createElement('<TD>'));
newTd.innerText='생성, 삽입된 줄-칸2';
}
function delRow(){
tableObj.deleteRow(0);
}
</SCRIPT>
<BUTTON onclick="delRow();">테이블 줄 제거 클릭</BUTTON>
<BUTTON onclick="makeRow();">테이블 줄 생성 클릭</BUTTON>