<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      將給定的數據動態加入到創建的表格中（源代碼）
                
                  發表時間：2023-08-29             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]本篇文章給大家帶來的內容是關于將給定的數據動態加入到創建的表格中（源代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。思路：創建 table + thead + tbody創建 tr + th創建每一行的 tr + td加到頁面中注：最后再加到頁面中的原因是每將一個元素加到頁面...
      
					本篇文章給大家帶來的內容是關于將給定的數據動態加入到創建的表格中（源代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
      思路：
      1. 創建 table + thead + tbody
      2. 創建 tr + th
      3. 創建每一行的 tr + td
      4. 加到頁面中
      注：最后再加到頁面中的原因是每將一個元素加到頁面一次，頁面便會刷新一次，因此先在內存中創建好表格再一次性的加到頁面中，頁面只需刷新一次，減少性能的損失。
      <!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中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清