從多維javascript數組創建html表

我試圖從嵌套for循環數組中創建一個html表。當我嘗試將<tr>標籤添加到表中時，它們將放入一個名爲tbody的元素中。我怎樣才能把tr標籤附加到table元素而不是tbody元素中？從多維javascript數組創建html表

<html> 
    <head> 
     <script src='jq.js'></script> 
    </head> 
    <body> 
     <table id='tb'></table> 

    </body> 
    <script> 
     $('#tb').ready(  
     function() { 
      console.log('table loaded'); 

      var ar = Array(2); 

      for(var i=0;i<ar.length;i++){ 
       ar[i]=Array(2); 
      } 

      ar[0][0]='1'; 
      ar[1][0]='2'; 
      ar[0][1]='3'; 
      ar[1][1]='4'; 

      console.log('multidimensional array created!'); 

      for(var j=0;j<ar.length;j++){ 
       console.log('<tr>'); 
       $('#tb').append('<tr>'); 
       for(var k=0;k<2;k++){ 
       console.log('<td>'+ar[k][j]+'</td>'); 
       $('#tb').append('<td>'+ar[k][j]+'</td>'); 
       } 
       console.log('</tr>'); 
       $('#tb').append('</tr>'); 
      } 
      //expected: 
      //12 
      //34 
      //actual 
      //1 2 3 4 
     }); 
    </script> 
</html>

這裏有一個jsfiddle

來源

2013-12-23 ArrowKneeous

一個表的主體內容包含一個''元件內。如果不存在，現代瀏覽器將添加它。這是它應該的方式。 –

就這麼你知道，你不需要在初始化數組時遇到那麼多麻煩。只要這樣做：'ar = [['1'，'2']，['3'，'4']];'就是這麼簡單 – Markasoftware

你不應該把這樣的內容附加到你的表中，因爲瀏覽器必須重畫整個DOM，所以效率不高。

你應該建立自己的表中的字符串裏面，那麼整個字符串追加到您的表，這樣的：

$('#tb').ready(  
    function() { 
     console.log('table loaded'); 

     var ar = Array(2); 

     for(var i=0;i<ar.length;i++){ 
      ar[i]=Array(2); 
     } 

     ar[0][0]='1'; 
     ar[1][0]='2'; 
     ar[0][1]='3'; 
     ar[1][1]='4'; 

     console.log('multidimensional array created!'); 
     //Prepare the outputed string 
     var theTable = ""; 
     for(var j=0;j<ar.length;j++){ 
      theTable += '<tr>'; 
      for(var k=0;k<2;k++){    
      theTable += '<td>'+ar[k][j]+'</td>'; 
      } 
      theTable += '</tr>'; 
     } 
     //Finally appended the whole string to the table 
     $('#tb').append(theTable); 
     //expected: 
     //12 
     //34 
     //actual 
     //1 2 3 4 
    });

我做了的jsfiddle你：JSFiddle

玩得開心！

來源

2013-12-23 18:07:06 CtrlX

這是很好的建議，但它不會解決他關於'tbody'的問題。 – Barmar

如果你看代碼，它會說：「// expected：... // actual」。所以「tbody問題」並不是我認爲的重點 – CtrlX

效率上的差異就像是1變化與n^2 dom變化一樣。這是最好的解決方案。從Barmars的回答中，我可以看到瀏覽器會自動添加任何我嘗試附加到表格的tbody元素。 – ArrowKneeous

你不能。 HTML表格是由三個部分組成：

thead包含的標題行
tbody包含的數據行。如果您想創建不同的行組（例如，如果行=月份，則每年可以有一個單獨的tbody），您可以擁有多個行。
tfoot包含頁腳行

如果你把行直接在table標籤內，他們假定爲tbody一部分，瀏覽器會自動爲你創建這個元素。您必須將所有行都放在tbody元素中，或者將它們全部直接放在table之內。

您的代碼問題與tbody元素無關。問題在於你試圖將td元素直接添加到表格中，而不是tr元素。您將$('#tb').append()視爲將HTML文本連接到文檔，而不是插入整個HTML元素。它應該是這樣的：

 for(var j=0;j<ar.length;j++){ 
      console.log('<tr>'); 
      var row = $('<tr/>').appendTo('#tb'); 
      for(var k=0;k<2;k++){ 
      console.log('<td>'+ar[k][j]+'</td>'); 
      row.append('<td>'+ar[k][j]+'</td>'); // Append TD to TR 
      } 
     }

或者你可以使用CTRLX的回答，他撰寫的整個表爲一個字符串，然後將其插入DOM一步到位。這比逐漸建立表格更有效。

來源

2013-12-23 18:05:53 Barmar

請記住，規範允許多個tbody元素。 –

<body> 
     <table id='tb1'> 
      <tbody id='tb'> 
      </tbody> 

     </table> 

    </body> 
    <script> 
     $('#tb').ready(  
     function() { 
      console.log('table loaded'); 

      var ar = Array(2); 

      for(var i=0;i<ar.length;i++){ 
       ar[i]=Array(2); 
      } 

      ar[0][0]='1'; 
      ar[1][0]='2'; 
      ar[0][1]='3'; 
      ar[1][1]='4'; 

      console.log('multidimensional array created!'); 

      for(var j=0;j<ar.length;j++){ 

       $('#tb').append('<tr>'); 
       for(var k=0;k<2;k++){     
       $('#tb').append('<td>'+ar[k][j]+'</td>'); 
       }    
       $('#tb').append('</tr>'); 
      } 
      //expected: 
      //12 
      //34 
      //actual 
      //1 2 3 4 
     }); 
    </script> 
</html>

這是工作的代碼，在此小提琴http://jsfiddle.net/fn4Wz/

來源

2013-12-23 18:09:30 Heaven42

從多維javascript數組創建html表

回答

相關問題