생성된 테이블에 주어진 데이터를 동적으로 추가(소스코드)
- 云罗郡主앞으로
- 2018-10-18 14:12:061820검색
이 기사에서는 생성된 테이블(소스 코드)에 특정 데이터를 동적으로 추가하는 방법에 대해 설명합니다. 필요한 친구가 이를 참조할 수 있기를 바랍니다.
아이디어:
테이블 + thead + tbody 만들기
tr + th
각 행에 대해 tr + td 만들기
-
페이지에 추가
참고: 최종적으로 페이지에 추가되는 이유는 페이지에 요소가 추가될 때마다 페이지가 새로 고쳐지기 때문에 먼저 메모리에 테이블이 생성된 후 페이지에 한꺼번에 추가되기 때문입니다. 한 번만 새로 고쳐야 하므로 성능 손실이 줄어듭니다.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body></body><script>
var data = [
{ name : "jim1", age : 18, gender : "male"},
{ name : "jim2", age : 19, gender : "female"},
{ name : "jim3", age : 20, gender : "female"},
{ name : "jim4", age : 21, gender : "male"}
]; function createElement( tag ) {
return document.createElement( tag );
} var table = createElement( "table" ); var thead = createElement( "thead" ); var tbody = createElement( "tbody" );
table.appendChild( thead );
table.appendChild( tbody ); var trhead = createElement( "tr" );
thead.appendChild( trhead ); for ( var k in data[ 0 ] ){
th = createElement( "th" );
th.appendChild( document.createTextNode( k ) );
trhead.appendChild( th );
} for ( var i = 0; i < data.length; i++){ var tr = createElement( "tr" ); for ( var j in data[ i ]){
td = createElement( "td" );
td.appendChild( document.createTextNode( data[i][j] ));
tr.appendChild( td );
}
tbody.appendChild( tr );
} //table.setAttribute("border","1px");
//或直接设置table.border = "1px";两者等价。
table.border = "1px";
table.cellspadding = 0;
table.setAttribute("align","center");
table.style.textAlign = "center";
table.setAttribute("borderColor","skyBlue");
table.setAttribute("cellspacing",0);
document.body.appendChild( table );</script></html>위는 생성된 테이블(소스 코드)에 주어진 데이터를 동적으로 추가하는 방법에 대한 전체 소개입니다. 자세한 내용은 PHP 중국어 웹사이트를 참조하시기 바랍니다.
위 내용은 생성된 테이블에 주어진 데이터를 동적으로 추가(소스코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제