테이블 insertRow, deleteRow 정의 및 사용법 summary_javascript 기술

테이블에 있는 행 수: var trCnt = table.rows.length; (테이블은 Id)

각 행에 있는 열 수: for (var i=0; itable.rows [i].cells.length;

javascript 작업 테이블:

insertRow(), deleteRow(), insertCell(), deleteCell() 메서드

table.insertRow( )는 IE에서는 문제가 없지만 Firefox에서는 table.insertRow(-1)로 변경해야 합니다.
마찬가지로 해당 insertCell()도 insertCell(-1)로 변경해야 합니다.

insertRow() 메소드

정의 및 사용법

insertRow() 메소드는 테이블의 지정된 위치에 새 행을 삽입하는 데 사용됩니다.

구문

tableObject.insertRow(index)

반환값

새로 삽입된 행을 나타내는 TableRow를 반환합니다.

설명

이 메소드는 새로운 태그를 나타내는 새로운 TableRow 객체를 생성하고 이를 테이블의 지정된 위치에 삽입합니다.

새 행은 인덱스 행 앞에 삽입됩니다. index가 테이블의 행 수와 같으면 새 행이 테이블 끝에 추가됩니다.

테이블이 비어 있으면 새 행이 새 섹션에 삽입되며 이 섹션 자체가 테이블에 삽입됩니다.

발생

매개변수 인덱스가 0보다 작거나 테이블의 행 수보다 크거나 같은 경우 이 메서드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.

예제

코드 복사 코드는 다음과 같습니다.

< html>
< head>
script type="text/javascript">
함수 insRow()
document.getElementById('myTable').insertRow(0 )
}





셀1

;/td>
cell2

value="새 행 삽입">

< /body>


deleteCell()

정의 및 사용법

deleteCell() 메소드는 테이블 행의 셀( 요소)을 삭제하는 데 사용됩니다.
구문

tablerowObject.deleteCell(index)

설명

인덱스는 행에서 삭제할 테이블 셀의 위치입니다.

이 방법은 테이블 행의 지정된 위치에 있는 테이블 요소를 삭제합니다.

발생

매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.

예제




코드 복사


코드는 다음과 같습니다.

< html> < head> script type="text/javascript"> 함수 delRow() document.getElementById('myTable').deleteRow(0 )

}

셀1

;/td>
cell2

value="첫 번째 행 삭제">

< /body>


insertCell()

정의 및 사용법

insertCell() 메소드는 HTML 테이블 행의 지정된 위치에 빈 요소를 삽입하는 데 사용됩니다.

구문

tablerowObject.insertCell(index)

반환 값

새로 생성 및 삽입된 요소를 나타내는 TableCell 개체입니다.

설명

이 메소드는 새로운 요소를 생성하여 행의 지정된 위치에 삽입합니다. 새 셀은 현재 인덱스로 지정된 위치에 있는 셀 앞에 삽입됩니다. index가 행의 셀 수와 같으면 새 셀이 행 끝에 추가됩니다.

이 방법은 데이터 테이블 요소만 삽입할 수 있습니다. 행에 헤더 요소를 추가해야 하는 경우 Document.createElement() 메서드와 Node.insertBefore() 메서드(또는 관련 메서드)를 사용하여 요소를 만들고 삽입해야 합니다.

발생

매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.

예제

코드 복사 코드는 다음과 같습니다.

< html>
< head>
script type="text/javascript">
함수 insCell()
var x=document.getElementById('tr2') insertCell(0 )
x.innerHTML="John"
}
< /head>

< border=" 1">
<일>성 tr>
< tr id="tr2">
< / 테이블>
< br /> ;
< /html>


deleteCell()

정의 및 사용법

deleteCell() 메소드는 테이블 행(< ;td> 요소).

구문

tablerowObject.deleteCell(index)

설명

인덱스는 행에서 삭제할 테이블 셀의 위치입니다.

이 방법은 테이블 행의 지정된 위치에 있는 테이블 요소를 삭제합니다.

발생

매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.

예제




코드 복사


코드는 다음과 같습니다.


< html>
< head>
script type="text/javascript">

함수 delCell() document.getElementById('tr2').deleteCell(0 ) }

< id=" tr1">

<성
< >
<피터
< /tr> ;
< 입력 유형="버튼" onclick="delCell()" value="셀 삭제">