如何通過數組循環創建帶有innerHTML值/ textnode的表格單元格

Question

我試圖運行一個Javascript循環來創建一個包含數組中值的表格： 我附加了文本節點並試圖將文本節點將是數組值，每個td長度一個。 這是到目前爲止我的代碼，這隻會造成一個單元與 「未定義」 值：

function addtd(){ 
     var table1 = document.getElementsByTagName('table')[0]; 
     var rowrow = document.createElement('tr'); 
     var foods = new Array(); 

     foods[0] = "milk" ;`enter code here` 
     foods[1] = "meat" ; 
     foods[2] = "fruit" ; 
     foods[3] = "fish" ; 
     foods[4] = "salad" ; 

     for (var i=0;i<foods.length;i++) 

     var cell1 = document.createElement('td').innerHTML = 'foods[i]';  
     var text1 = document.createTextNode(foods[i]) ; 

     cell1.appendChild(text1); 
     rowrow.appendChild(cell1); 
     table1.appendChild(rowrow); 
     } 

     <div id="divfood"> </div> 
     <button onclick="addtd()">Click me</button>`enter code here` 
     <table border="2" id="tabletable" cellspacing="5" > 
     </table> 

Answer 1

我想改變這一點 -

var cell1 = document.createElement('td').innerHTML = 'foods[i]'; 

到

var cell1 = document.createElement('td'); 
cell1.innerHTML = 'foods[i]'; 

我不會」當你將它的innerHTML內聯到cell1，但沒有測試它時，期望cell1將被正確設置。

Answer 2

像這樣的東西會遍歷你的數組並創建一行，因爲這似乎是你正在嘗試做的事情。

var foods = ["milk", "eggs", "lettuce", "tomato"], 
    food, 
    row = document.createElement("tr"); 

while (food = foods.shift()) { 
    var el = document.createElement("td"); 
     el.innerText = food; 

    row.appendChild(el); 
} 

document.getElementsByTagName("table")[0].appendChild(row); 

Answer 3

你有幾個錯誤，在你的代碼，包括周圍的for環缺少括號和怪異'enter code here'一句六號線。您還忘了將您的JavaScript代碼放在<script>標籤內。以下是您的代碼的工作版本：

<script> 
function addtd(){ 
    var table1 = document.getElementsByTagName('table')[0]; 
    var rowrow = document.createElement('tr'); 
    var foods = new Array(); 

    foods[0] = "milk" ; 
    foods[1] = "meat" ; 
    foods[2] = "fruit" ; 
    foods[3] = "fish" ; 
    foods[4] = "salad" ; 

    for (i=0; i <foods.length; i++) { 
     var cell1 = document.createElement('td'); 
     var text1 = document.createTextNode(foods[i]); 
     cell1.appendChild(text1); 
     rowrow.appendChild(cell1); 
    } 
    table1.appendChild(rowrow); 
} 
</script> 

<div id="divfood"> </div> 
<button onclick="addtd()">Click me</button> 
<table border="2" id="tabletable" cellspacing="5" > 
</table> ​ 

這是jsFiddle demo。