作成したテーブル(ソースコード)に指定されたデータを動的に追加します-htmlチュートリアル-php.cn

アイデア:

ホームページ

ウェブフロントエンド

htmlチュートリアル

作成したテーブル(ソースコード)に指定されたデータを動的に追加します

云罗郡主

Oct 18, 2018 pm 02:12 PM

データダイナミクス

この記事は、作成したテーブル (ソースコード) に特定のデータを追加する方法について説明します。必要な方は参考にしていただければ幸いです。

アイデア:

テーブル本体を作成します
テーブルを作成します
各行に 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。