자바스크립트로 표를 만드는 방법(자바스크립트로 표를 그리는 2가지 방법)_기본지식

1. insertRow() 및 insertCell() 함수

insertRow() 함수는 다음 형식의 매개변수를 사용할 수 있습니다.

insertRow(index): 인덱스는 0부터 시작합니다

이 함수는 첫 번째 행 앞에 새 행을 추가하는 insertRow(0)와 같이 인덱스 행 앞에 새 행을 추가합니다. 기본 insertRow() 함수는 테이블 끝에 새 행을 추가하는 insertRow(-1)과 동일합니다. 일반적으로 사용하는 경우: objTable.insertRow(objTable.rows.length) 테이블 objTable 끝에 새 행을 추가하는 것입니다.

insertCell()과 insertRow의 사용법은 동일하므로 여기서는 논의하지 않습니다.

2. deleteRow() 및 deleteCell() 메소드

deleteRow() 함수는 매개변수를 사용할 수 있으며 형식은 다음과 같습니다. deleteRow(index): 인덱스는 0부터 시작합니다

위의 두 가지 방법과 같은 의미는 지정된 위치의 행과 셀을 삭제하는 것입니다. 전달할 매개변수: Index는 테이블 내 행의 위치로, 다음 방법으로 얻은 후 삭제할 수 있습니다.

사용 중 발생한 문제에 대해 말씀드리겠습니다. 테이블의 행을 삭제할 때 특정 행을 삭제하면 테이블의 행 수가 즉시 변경되므로 테이블을 삭제하려면 모든 행을 삭제하세요. , 다음 코드가 잘못되었습니다:

이 코드는 원본 테이블의 본문을 삭제하려고 합니다. 두 가지 문제가 있습니다. 우선, deleteRow(i)일 수 없으며, deleteRow(1)이어야 합니다. 테이블 행을 삭제할 때 테이블의 행 수가 변경되기 때문에 이것이 문제의 핵심입니다. 행 길이가 항상 작아지고 삭제된 행 수가 항상 예상되는 것보다 적습니다. , 테이블을 올바르게 삭제하세요. 코드 줄은 다음과 같아야 합니다.

3. 셀과 행의 속성을 동적으로 설정

A. 다음 형식으로 setAttribute() 메소드를 사용하십시오: setAttribute(속성, 속성 값)

참고: 이 방법은 거의 모든 DOM 개체에 사용할 수 있습니다. 첫 번째 매개변수는 속성 이름(예: border)이고 두 번째 매개변수는 테두리에 설정하려는 값(예: 1)입니다. 🎜>

var objMyTable = document.getElementById("myTable "); 예를 들어 TD의 높이를 설정하려면 먼저 TD 객체를 얻은 다음 setAttribute() 메서드를 사용해야 합니다.

var objCell = document.getElementById("myCell "); 사용 시 스타일 설정에 문제가 발생했습니다. 대신 setAttribute("className","inputbox2")를 사용해야 합니다. 하하. 문제는 일부 속성이 DW에 있는 것과 일치하지 않는다는 것입니다. 하하, 직접 살펴보겠습니다.

나.직접배치

var objMyTable = document.getElementById("myTable ");