자바스크립트로 표를 만드는 방법(자바스크립트로 표를 그리는 두 가지 방법)

저자：Eve Cole 업데이트 시간：2025-01-28 04:00:02

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");

var index=row.rowIndex;//이 속성이 있습니다 ㅎㅎ

objTable.deleteRow(index);

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

다음과 같이 코드 코드를 복사합니다.

함수 클리어Row(){

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

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

다음과 같이 코드 코드를 복사합니다.

함수 클리어Row(){

objTable= document.getElementById("myTable");

var 길이= objTable.rows.length;

for(var i=1; i<길이; 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. 테이블 생성

행 <tr>과 셀 <td>의 추가 및 삭제를 이해하고 나면 테이블을 만들 수 있습니다.

1단계: 동적으로 변경하려는 테이블이 있어야 합니다. 여기서 말하는 것은 페이지에 이미 존재하는 테이블에 대한 것입니다. myTable.

다음과 같이 코드 코드를 복사합니다.

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

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

다음과 같이 코드 코드를 복사합니다.

var 인덱스 = objMyTable.rows.length-1;

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

//셀 박스 번호

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

이제 간단하게 행과 열을 만들 수 있습니다. 아래에 특정 코드를 게시했습니다. 아주 간단한 예시일 뿐이지만 방법은 아마 위와 같을 겁니다. ㅎㅎ 천천히 살펴보도록 하겠습니다~

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<머리>

<스크립트 언어="자바스크립트">

var 개수=false,NO=1;

함수 addRow(){

개수=!개수;

//행 추가

var newTr = testTbl.insertRow(testTbl.rows.length);

//두 개의 열 추가

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//열 내용 및 속성 설정

if(Count){newTr.style.Background="#FFE1FF";}

그렇지 않으면 {newTr.style.Background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

아니요++

newTd1.innerText="라인 "+ NO+";

}

</script>

</head>

<본문>

<테이블 테두리=0 셀 간격="1" id="testTbl" 스타일="글꼴 크기:14px;"

</tr>

</table>

<라벨>

</label>

</body>

</html>

5.appendChild() 메소드

다음과 같이 코드 코드를 복사합니다.

<html>

<머리>

<스크립트 유형="텍스트/자바스크립트">

<!--

var 텍스트번호 = 1;

함수 addTextBox(양식, afterElement) {

// 텍스트 상자 번호를 증가시킵니다.

텍스트번호++;

//라벨 생성

var label = document.createElement("label");

//텍스트박스 생성

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// 라벨의 텍스트를 추가합니다.

label.appendChild(document.createTextNode("텍스트 상자 #"+textNumber+": "));

// 텍스트 상자를 안에 넣습니다.

label.appendChild(textField);

// 폼에 모두 추가

form.insertBefore(label,afterElement);

거짓을 반환;

}

함수 제거텍스트박스(양식) {

if (textNumber > 1) { // 텍스트 상자가 두 개 이상인 경우

// 마지막에 추가된 것을 제거합니다.

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

텍스트번호--;

}

//-->

</script>

<스타일 유형="텍스트/css">

<!--

라벨 {

표시:블록;

여백:.25em 0em;

}

-->

</style>

</head>

<본문>

<p>

</p>

</form>

</body>

</html>

<html>

<머리>

<스크립트 유형="텍스트/자바스크립트">

<!--

var 텍스트번호 = 1;

함수 addTextBox(양식, afterElement) {

// 텍스트 상자 번호를 증가시킵니다.

텍스트번호++;

//라벨 생성

var label = document.createElement("label");

//텍스트박스 생성

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// 라벨의 텍스트를 추가합니다.

label.appendChild(document.createTextNode("텍스트 상자 #"+textNumber+": "));

// 텍스트 상자를 안에 넣습니다.

label.appendChild(textField);

// 폼에 모두 추가

form.insertBefore(label,afterElement);

거짓을 반환;

}

함수 제거텍스트박스(양식) {

if (textNumber > 1) { // 텍스트 상자가 두 개 이상인 경우

// 마지막에 추가된 것을 제거합니다.

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

텍스트번호--;

}

//-->

</script>

<스타일 유형="텍스트/css">

<!--

라벨 {

표시:블록;

여백:.25em 0em;

}

-->

</style>

</head>

<본문>

<p>

</p>

</form>

</body>

</html>