JavaScriptを使用してhtml表のセルをループします

Question

テーブルのセルをループして値を挿入しようとしています。私のコードに何が問題なのかわかりません。私を助けてください。愚かな間違い。それが何であるか教えてください。 は、ここに私のコード -

var data = response.datas.length; 
       var table = document.getElementById('itemsval'); 
       for(var i=0; i<data; i++){ 
       var row = table.insertRow(i); 
       for(var j=0; j<7; j++){ 
       var cell = row.insertCell(j); 


       cell[i][j].innerHTML = response.datas[i].p_name; 
       cell[i][j].innerHTML = response.datas[i].p_details; 
       cell[i][j].innerHTML = response.datas[i].p_qty; 
       cell[i][j].innerHTML = response.datas[i].p_rate; 
       cell[i][j].innerHTML = response.datas[i].p_dis; 
       cell[i][j].innerHTML = response.datas[i].p_tax; 
       cell[i][j].innerHTML = response.datas[i].p_tot; 
       } 

       } 

私はプロパティを読み取ることができませんエラー - を得続ける「0」事前に未定義

感謝のです。

Answer 1

最初の繰り返しでは、この行

cell[i][j].innerHTML = response.datas[i].p_name; 

はcell内0というプロパティにアクセスしようとします。 cellには0という名前のプロパティ（変数i）がありません。それが行われた場合、そのプロパティの値は、0（変数jから）のいずれかのプロパティを持ちません。 ...後の値が以前の値を上書きするようになります

cell[i][j].innerHTML = response.datas[i].p_name; 
cell[i][j].innerHTML = response.datas[i].p_details; 

：

別には、同じ場所への書き込みを繰り返しました。

代わりに、行にセルを追加して、そのセルのコンテンツを設定する必要があります。のは、自分自身のことを行うための便利な機能を挙げてみましょう：

セルを追加し

function addCell(row, content) { 
    var cell = row.insertCell(); 
    cell.appendChild(
     document.createTextNode(content) 
    ); 
    return cell; 
} 

、あなたがHTMLマークアップを心配する必要はありません方法で、その内容を設定して、セルを返します。

さあ、あなたのコードでそれを使ってみましょう：そのコードがArray#forEach経由response.datas配列をループする方法

// Get the table 
var table = document.getElementById('itemsval'); 

// Add the rows 
response.datas.forEach(function(entry) { 
    var row = table.insertRow(); 
    addCell(row, entry.p_name); 
    addCell(row, entry.p_details); 
    addCell(row, entry.p_qty); 
    addCell(row, entry.p_rate); 
    addCell(row, entry.p_dis); 
    addCell(row, entry.p_tax); 
    addCell(row, entry.p_tot); 
}); 

注意。 You have lots of other options（これも私の答えです）ですが、この場合は最もシンプルなようです。