기본 DOM 튜토리얼 : DOM 제어 테이블 사용

저자：Eve Cole 업데이트 시간：2025-05-05 23:48:01

지금은 테이블의 CSS 컨트롤에 대해서는 이야기하지 않을 것입니다. 먼저 아래 표에서 일반적으로 사용되는 DOM을 공유하겠습니다.

테이블 작업을 추가하는 데 일반적으로 사용되는 방법은 InserTrow () 및 insertCell () 메소드입니다.

행은 0에서 계산됩니다.

다음과 같이 코드를 복사하십시오. var otr = document.getElementById ( "member"). InserTrow (2)

그것은 두 번째 줄에 새 줄을 추가하는 것을 의미합니다.

코드 사본은 다음과 같습니다.

var atext = new Array ();

atext [0] = document.createtextNode ( "Frepeggs");

atext [1] = document.creatextNode ( "W610");

atext [2] = document.creatextNode ( "11 월 5 일");

atext [3] = document.creatextNode ( "Scorpio");

atext [4] = document.creatextNode ( "1038818");

for (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

otd.appendChild (atext [i]);

}

변수 OTR은 테이블의 새 행을 삽입 한 다음 insertCell을 사용 하여이 행에 새 데이터를 삽입하고 CreateTextNode를 사용하여 새 텍스트 노드를 만들고 AppendChild에서 OTD에 제공하며 OTD는 새 셀입니다.

1. 행을 삽입 (동적 추가 테이블)

코드 사본은 다음과 같습니다.

Window.onload = function () {

var otr = document.getElementById ( "member"). InserTrow (2); // 라인을 삽입하십시오

var atext = new Array ();

atext [0] = document.createtextNode ( "Frepeggs");

atext [1] = document.creatextNode ( "W610");

atext [2] = document.creatextNode ( "11 월 5 일");

atext [3] = document.creatextNode ( "Scorpio");

atext [4] = document.creatextNode ( "1038818");

for (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

otd.appendChild (atext [i]);

}

</스크립트>

<테이블 요약 = "EE 일요일에 회원 목록"id = "member">

<caption> 멤버리스트 </caption>

<tr>

<th scope = "col"> class </th>

<th scope = "col"> mobile </th>

</tr>

<tr>

</tr>

<tr>

<td> girlwing </td>

</tr>

<tr>

<td> tastestory </td>

</tr>

</테이블>

2. 테이블의 내용을 수정하십시오

테이블이 만들어지면 htmldom을 직접 사용하여 테이블을 작동 할 수 있습니다.이 테이블은 document.getElementById () 및 document.getElementsByTagName ()보다 편리합니다.

otable.rows [i] .Cell [J]

위는 두 속성 행과 셀 (모두 0에서 계산)을 통해 테이블의 i 번째 행 및 J-th 열에 쉽게 액세스 할 수 있습니다. 셀 객체를 얻은 후 innerHTML 속성을 사용하여 Xiangyu의 내용을 수정할 수 있습니다.

예를 들어, 4 행과 5 개의 열의 내용을 양호하게 수정하십시오.

그런 다음 다음 코드를 사용할 수 있습니다

코드 사본은 다음과 같습니다.

var otable = document.getElementById ( "table1");

otable.rows [4] .Cells [5] .innerhtml = "good";

3. 테이블 내용을 삭제합니다

테이블은 추가, 수정 및 삭제하는 기능이 있으므로.

테이블에서 행을 삭제하면 Deleterow (i) 메소드가 사용됩니다. 여기서 I는 행 번호입니다.

테이블에서 열 삭제는 tr의 deletecell (j) 메소드를 사용합니다.

다음 코드는 삭제 된 테이블의 두 번째 행과 원래 테이블의 세 번째 행의 두 번째 열을 나타냅니다.

코드 사본은 다음과 같습니다. var otable = document.getElementById ( "table1"); otable.deleterow [2]; otable.rows [2] .deletecell [3];

다음 코드는 테이블의 두 번째 행이 삭제되고 원래 테이블의 세 번째 행의 두 번째 열이 동적 삭제가 있고 전체 HTML 프레임 워크에 영향을 미치지 않는 것으로 간주되거나 테이블 컨텐츠가 많은 경우 동적 삭제 및 추가를 채택 할 수 있음을 나타냅니다.

코드 사본은 다음과 같습니다.

Window.onload = function () {

var otr = document.getElementById ( "member"). InserTrow (2); // 라인을 삽입하십시오

var atext = new Array ();

atext [0] = document.createtextNode ( "Frepeggs");

atext [1] = document.creatextNode ( "W610");

atext [2] = document.creatextNode ( "11 월 5 일");

atext [3] = document.creatextNode ( "Scorpio");

atext [4] = document.creatextNode ( "1038818");

for (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

otd.appendChild (atext [i]);

}

</스크립트>

<테이블 요약 = "EE 일요일에 회원 목록"id = "member">

<caption> 멤버리스트 </caption>

<tr>

<th scope = "col"> class </th>

<th scope = "col"> mobile </th>

</tr>

<tr>

</tr>

<tr>

<td> girlwing </td>

</tr>

<tr>

<td> tastestory </td>

</tr>

</테이블>

열 삭제

코드 사본은 다음과 같습니다.

함수 deletecolumn (otable, inum) {

// 열 삭제 함수를 사용자 정의합니다. 즉, 각 행에 해당 셀을 삭제하십시오.

for (var i = 0; i <otable.rows.length; i ++)

otable.rows [i] .deletecell (inum);

}

Window.onload = function () {

var otable = document.getElementById ( "table1");

Deletecolumn (Otable, 2);

}

테이블 열을 삭제하려면 DOM에는 직접 호출 가능한 방법이 없습니다. deletecolumn () 메소드를 직접 작성해야합니다. 이 메소드는 두 개의 매개 변수를 허용합니다. 하나의 매개 변수는 테이블 객체이고 다른 매개 변수는 삭제하려는 열 숫자입니다. 작문 방법은 매우 간단합니다. deletecell () 메소드를 사용하여 각 행은 해당 셀을 삭제하는 해당 방법을 실행합니다.