DOM 운용양식 예시(dom생성양식)_HTML/Xhtml_웹페이지 제작-HTML 튜토리얼-php.cn

1. HTML 태그를 사용하여 테이블을 만듭니다.

코드 복사

코드는 다음과 같습니다.

직원 목록

<일>이름
성별
나이

;
장산
남성
20

< ;tr>
lee思
여성
22
< /tr> 🎜>

합계: N

thead, tfoot 및 caption 태그는 테이블에 tbody, tr, td 및 th 태그를 하나만 가질 수 있습니다. N 테이블의
2. DOM을 사용하여 테이블 만들기

태그는 HTML에서 가장 복잡한 구조입니다. DOM을 통해 생성하고 HTMLDOM을 통해 작동할 수 있습니다. (HTMLDOM은 HTML을 보다 편리하고 빠르게 조작할 수 있는 방법을 제공합니다.)

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

3. DOM을 사용하여 테이블 데이터 가져오기(DOM을 사용하여 테이블을 조작하는 것은 매우 귀찮습니다)

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

window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children [0].innerHTML);
};

4. HTMLDOM을 사용하여 테이블 데이터를 얻습니다(편리하고 간단하며 명확함).

테이블이 복잡하고 여러 단계로 구성되어 있기 때문에 이전에 배운 DOM을 단지 특정 요소를 얻기 위해 사용하는 것은 매우 불편할 수 있으므로 HTMLDOM을 사용하면 훨씬 더 명확해질 것입니다.

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

window.onload=function( ){
//HTMLDOM을 사용하여 테이블 요소 가져오기
vartable=document.getElementsByTagName('table')[0];//테이블 참조 가져오기
//HTMLDOM을 눌러 테이블의 < caption>
Alert(table.caption.innerHTML);//캡션 내용 가져오기
//table.caption.innerHTML="Student table";//값을 설정할 수도 있습니다
} ;

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

window.onload=function(){
//HTMLDOM을 사용하여 테이블 요소 가져오기
vartable=document.getElementsByTagName('table')[0];//테이블 참조 가져오기
//테이블 헤더

를 가져오려면 HTMLDOM을 누르세요,
alert(table.tHead);//테이블 헤더 가져오기
alert(table.tFoot);//테이블 풋 가져오기
/p>

//테이블 본문을 가져오려면 HTMLDOM을 누르세요
alert(table.tBodies);//테이블 본문 컬렉션 가져오기
};

및 는 테이블에서 고유하며 하나만 있을 수 있습니다. 는 유일한 것이 아니라 여러 개를 가질 수 있으므로 최종적으로 반환된 는 요소 참조이고

코드 복사

코드는 다음과 같습니다.

window.onload=function( ){
//HTMLDOM을 사용하여 테이블 요소 가져오기
vartable=document.getElementsByTagName('table')[0];//테이블 참조 가져오기
//HTMLDOM을 눌러 테이블의 행 수 가져오기 table
alert( table.rows.length);//행 번호, 수량 컬렉션 가져오기

//HTMLDOM을 눌러 테이블 본문의 행 수를 가져옵니다
alert(table.tBodies[0].rows.length);//본문의 행 컬렉션 가져오기, 수량
};

코드 복사

코드는 다음과 같습니다.

window.onload= function(){
//HTMLDOM을 사용하여 테이블 요소 가져오기
vartable=document.getElementsByTagName('table')[0];//테이블 참조 가져오기

//HTMLDOM을 눌러 테이블 본문의 첫 번째 행에 있는 셀 수를 가져옵니다(tr)
alert(table.tBodies[0].rows[0].cells.length);//Get 첫 번째 행 셀 수
};

코드 복사

코드

window.onload=function(){
//HTMLDOM을 사용하여 테이블 요소 가져오기
vartable=document.getElementsByTagName('table')[0];/ /테이블 참조 가져오기

//HTMLDOM을 눌러 테이블 본문의 첫 번째 행에 있는 첫 번째 셀의 내용을 가져옵니다(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML ) ;//첫 번째 행의 첫 번째 셀 내용 가져오기
};

코드 복사

코드는 다음과 같습니다:

5. HTMLDOM 생성 테이블

코드 복사

코드는 다음과 같습니다.

window.onload=function( ){
//HTMLDOM에 따라 테이블 생성
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='인사 테이블';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//이 메서드는 참조를 반환합니다.
vartr=thead .insertRow(0);//이 메소드는 참조

vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//데이터를 추가하는 방법, 다음 방법도 사용할 수 있습니다
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data2'));
td2.innerHTML="data2 ";

document.body.appendChild(table);
};테이블을 생성할 때

, ,