明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中（源代碼）

發(fā)表時間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中（源代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。思路：創(chuàng)建 table + thead + tbody創(chuàng)建 tr + th創(chuàng)建每一行的 tr + td加到頁面中注：最后再加到頁面中的原因是每將一個元素加到頁面...

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中（源代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

思路：

  1. 創(chuàng)建 table + thead + tbody

  2. 創(chuàng)建 tr + th

  3. 創(chuàng)建每一行的 tr + td

  4. 加到頁面中

注：最后再加到頁面中的原因是每將一個元素加到頁面一次，頁面便會刷新一次，因此先在內(nèi)存中創(chuàng)建好表格再一次性的加到頁面中，頁面只需刷新一次，減少性能的損失。

<!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");
  //或直接設(shè)置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>

以上就是對將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中（源代碼）的全部介紹，本文內(nèi)容緊湊，希望大家可以有所收獲，更多請關(guān)注PHP中文網(wǎng)。

以上就是將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中（源代碼）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。