JavaScript 연구 노트 (13) Dom 생성 테이블_기본 지식

Dom 기본 - 테이블 생성
js를 사용하여 테이블을 동적으로 생성하는 데는 appendChild(), insertRow 및 insertCell()이라는 두 가지 형식이 있습니다. 하지만 첫 번째 방법은 IE에서 문제가 발생할 수 있으므로 두 번째 방법을 사용하는 것이 좋습니다.
1. insertRow(index): 인덱스는 0부터 시작합니다.
이 함수는 첫 번째 행 앞에 새 행을 추가하는 insertRow(0)와 같이 인덱스 행 앞에 새 행을 추가합니다. 기본 insertRow() 함수는 테이블 끝에 새 행을 추가하는 insertRow(-1)과 동일합니다. 일반적으로 사용하는 경우:
objTable.insertRow(objTable.rows.length)는 objTable 테이블 끝에 새 행을 추가하는 것입니다.
insertCell()과 insertRow의 사용법은 동일합니다.
2. deleteRow(index): 인덱스는 0부터 시작합니다.
전달할 매개변수는 다음과 같습니다.
var row = document.getElementById("row's Id");
var index = row.rowIndex; //이 속성이 있습니다
objTable.deleteRow(index); 사용 중 테이블 삭제 로잉 시 특정 행이 삭제되면 테이블의 행 수가 즉시 변경되고 행.길이는 항상 작아지므로 테이블의 모든 행을 삭제하려면 다음을 수행하세요.

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

function RemoveAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i ) {
objTable.deleteRow(i); 🎜>}
}


3. setAttribute() 메서드는 셀과 행의 속성을 동적으로 설정합니다.

형식은 다음과 같습니다. setAttribute(속성, 속성 값)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //테이블의 테두리를 1로 설정
사용 시 스타일 설정에 문제가 발생했습니다. .
setAttribute("class", "inputbox1");를 사용할 수 없습니다. 대신
setAttribute("className", "inputbox1"),
을 사용해야 합니다. 행 및 셀 의 추가 및 삭제를 이해하면 테이블을 만들 수 있습니다.
1단계: 동적으로 변경하려는 테이블이 필요합니다. 여기서는 페이지에 이미 존재하는 테이블에 대해 설명합니다. myTable
　var objMyTable = document.getElementById("myTable ");
2단계: 행 및 열 개체 생성

코드 복사 코드는 다음과 같습니다. var index = objMyTable.rows.length;

var nextRow = objMyTable.insertRow(index); //마지막 행

//var nextRow = objMyTable.insertRow(0); /첫 번째 줄


다음은 샘플 코드입니다

코드를 복사하세요 코드는

1번째 줄