4

Javascript ループを実行して、配列から値を含むテーブルを作成しようとしました。テキスト ノードを追加し、テキスト ノードが長さの td ごとに 1 つの配列値になるようにしました。これはこれまでの私のコードです。「未定義」の値を持つセルを 1 つだけ作成します。

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>
4

3 に答える 3

2

私はこれを変更します -

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

に

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

innerHTML インラインを cell1 にチェーンしているときに cell1 が正しく設定されるとは思いませんが、テストしていません。

于 2012-12-27T21:30:16.147 に答える
1

このようなものは、配列をループしてその行を作成します。これは、あなたがやろうとしていることのようです。

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);
于 2012-12-27T21:31:50.917 に答える
1

forループを囲む中括弧の欠落や'enter code here'6 行目の奇妙に見える文など、コードにいくつかのエラーがあります。タグ内に 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 のデモです。

于 2012-12-28T09:31:50.630 に答える