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循环周围缺少大括号和第6行奇怪的'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。

如何通过数组循环创建具有innerHTML值/ textnode的表格单元格

3 个答案: