자바스크립트로 표를 만드는 방법(자바스크립트로 표를 그리는 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는 테이블 내 행의 위치로, 다음 방법으로 얻은 후 삭제할 수 있습니다.

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

var row=document.getElementById("Id of row" );
var index=row.rowIndex;//이 속성이 있습니다.
objTable.deleteRow(index);

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

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

functionclearRow(){
objTable = document.getElementById("myTable");

for( var i=1; i {
tblObj.deleteRow(i); }
}

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

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

functionclearRow(){
objTable = document.getElementById("myTable");
var length= objTable.rows.length
for( var i=1; i {
objTable.deleteRow(i );
    }
}

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

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

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

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

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

objMyTable.setAttribute("border",1);//테이블의 테두리를 1로 설정

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

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

var objCell = document.getElementById("myCell ");

objCell.setAttribute("height",24);//셀 높이를 24로 설정

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

나.직접배치

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

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

objMyTable.border=1;//테이블 테두리를 1로 설정

이 방법도 누구에게나 적용되는 방법이죠 ㅎㅎ

4. 테이블 만들기

행과 셀의 추가 및 삭제를 이해한 후 테이블을 만들 수 있습니다.

1단계: 동적으로 변경할 수 있는 테이블이 필요합니다. 여기서 말하는 것은 페이지에 이미 존재하는 테이블에 대한 ID: myTable

입니다.

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

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

2단계: 행 및 열 개체 만들기

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

var index = objMyTable.rows.length- 1;
var nextRow = objMyTable.insertRow(index);//추가할 행은 두 번째부터 마지막 ​​행까지 추가됩니다

//셀 상자 번호
var newCellCartonNo = nextRow.insertCell()
var cartonNoName = "IptCartonNo"
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

그렇습니다. 간단히 행과 열을 만들면 됩니다. 아래에 특정 코드를 게시했습니다. 아주 간단한 예시일 뿐인데 방법은 아마 위와 같을 텐데요, ㅎㅎ 천천히 살펴보도록 하겠습니다~

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

.org/1999/xhtml">
< ;head>





<본문>

텍스트 상자 #1:

   
   

<머리>




<본문>

텍스트 상자 #1: