如何將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中-創(chuàng)新互聯(lián)

如何將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、網(wǎng)站營銷推廣，國際域名空間，網(wǎng)絡(luò)空間，綿陽服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系創(chuàng)新互聯(lián)公司。

思路：

創(chuàng)建 table + thead + tbody
創(chuàng)建 tr + th
創(chuàng)建每一行的 tr + td
加到頁面中

注：最后再加到頁面中的原因是每將一個元素加到頁面一次，頁面便會刷新一次，因此先在內(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>

看完上述內(nèi)容，你們掌握如何將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：如何將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article40/dgheho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站建設(shè)、建站公司、網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何將給定的數(shù)據(jù)動態(tài)加入到創(chuàng)建的表格中-創(chuàng)新互聯(lián)