집 > 기사 > 웹 프론트엔드 > DOM 기본 튜토리얼: DOM을 사용하여 양식 제어_기본 지식

DOM 기본 튜토리얼: DOM을 사용하여 양식 제어_기본 지식

WBOY원래의: 2016-05-16 16:18:471312검색

지금은 테이블의 CSS 제어에 대해 이야기하지 않겠습니다. 먼저 테이블에서 일반적으로 사용되는 DOM을 공유하겠습니다.

테이블 추가 작업에 일반적으로 사용되는 메서드는 insertRow() 및 insertCell() 메서드입니다.

행은 0부터 계산됩니다. 예:

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

var oTr = document.getElementById("member"). insertRow(2 )

은 두 번째 줄에 새로운 줄을 추가한다는 의미입니다.

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

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("11월 5일");

aText[3] = document.createTextNode("전갈자리");

aText[4] = document.createTextNode("1038818");

for(var i=0;i
var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

oTr 변수는 테이블에 새 행을 삽입한 다음 insertCell을 사용하여 이 행에 대한 새 데이터를 삽입하고 createTextNode를 사용하여 새 텍스트 노드를 생성한 다음 이를 AppendChild의 oTd에 제공하는 것입니다. oTd는 새 셀입니다.

1. 행 삽입(동적으로 표 추가)

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

        이름
        클래스
        생일
        성좌
        모바일

2.修改表格的内容

当表格建立后, 可以直接使用HtmlDom对表格进行操작, 比document.getElementById(),document.getElementsByTagName()操작품更为方便。
oTable.rows[i].cell[j]
以上통신행, 셀两个属性轻松访问到表格特特特特以内容第i行 and第j列(道是从0开始计数), 获得单元格对象后就可以使사용 내부 HTML 유형은 修改翔宇的内容了。
4행 5행이 좋습니다
则可以使用以下代码

复主代码代码如下:

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

oTable.rows[4].cells[5].innerHTML = "좋음";

3.删除表格内容

表格既然有添加、修改、就有删除功能。
表格中删除行使用deleteRow(i)방법，其中i为行号。
表格中删除列使는 tr의 deleteCell(j) 방법을 사용합니다.

复主代码代码如下: var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

다음 코드는 동적 삭제가 전체 HTML 프레임워크에 영향을 미치지 않거나 테이블에 내용이 많은 경우를 고려하여 테이블의 두 번째 행과 원본 테이블의 세 번째 행의 두 번째 열을 삭제하는 것을 나타냅니다. , 동적삭제, 추가가 가능합니다

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

회원 목록
이삭	W13	6월 24일	암	1118159
걸윙	W210	9월 16일	처녀자리	1307994
맛 이야기	W15	11월 29일	사수자리	1095245

~ > > > > ~

> > > > >

> > > > >

> > > > >

열 삭제

코드 복사

코드는 다음과 같습니다.

함수 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() 메서드를 사용하면 각 행에서 해당 셀 삭제 메서드를 실행합니다.

성명：

이전 기사：javascript 함수 속성 및methods_javascript 기술에 대한 간략한 토론다음 기사：javascript 함수 속성 및methods_javascript 기술에 대한 간략한 토론

DOM 기본 튜토리얼: DOM을 사용하여 양식 제어_기본 지식

관련 기사