ホームページ > 記事 > ウェブフロントエンド > 作成したテーブル(ソースコード)に指定されたデータを動的に追加します
作成したテーブル(ソースコード)に指定されたデータを動的に追加します
- 云罗郡主転載
- 2018-10-18 14:12:061750ブラウズ
この記事は、作成したテーブル (ソース コード) に特定のデータを追加する方法について説明します。必要な方は参考にしていただければ幸いです。
アイデア:
テーブル本体を作成します
テーブルを作成します
各行に 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 の中国語 Web サイトに注目していただければ幸いです。多くのための。
以上が作成したテーブル(ソースコード)に指定されたデータを動的に追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。