JavaScriptのTdsオートメーション

Question

const q3Msg = document.getElementById('tableq3'); 

var value = [{ 
    id: 1, 
    result: 65, 
    situation: 'YES' 
}, { 
    id: 2, 
    result: 22, 
    situation: 'NO' 
}]; 

function q3Calc() { 
    q3Msg.classList.remove('hidden'); 

    var table = document.createElement('tbody'), tr, td, row, cell; 
    for (row = 0; row < value.length; row++) { 
     console.log(value); 
     tr = document.createElement('tr'); 
     for (cell = 0; cell < 3; cell++) { 
      td = document.createElement('td'); 
      tr.appendChild(td); 
      td.innerHTML = value; 
     } 
     table.appendChild(tr); 
    } 
    document.getElementById('tableq3').appendChild(table); 
} 

上記のコードは、tdsのhtmlで自動化されています。しかし私は結果として以下のイメージを持っています。

は、どのように私は別のTDの各配列インデックスを表示することができますか？

例えば、最初の行では、Iはでshow 1つの65 YES、及び次の行2 22 NO

Answer 1

あなたporblemはtd.innerHTML = value;です。期待値を得るにはtd.innerHTML = value[row][Object.keys(value[row])[cell]];に置き換えてください。

const q3Msg = document.getElementById('tableq3'); 
 

 
var value = [{ 
 
    id: 1, 
 
    result: 65, 
 
    situation: 'YES' 
 
}, { 
 
    id: 2, 
 
    result: 22, 
 
    situation: 'NO' 
 
}]; 
 

 
function q3Calc() { 
 
    q3Msg.classList.remove('hidden'); 
 

 
    var table = document.createElement('tbody'), 
 
    tr, td, row, cell; 
 
    for (row = 0; row < value.length; row++) { 
 
    console.log(value); 
 
    tr = document.createElement('tr'); 
 
    for (cell = 0; cell < 3; cell++) { 
 
     td = document.createElement('td'); 
 
     tr.appendChild(td); 
 
     td.innerHTML = value[row][Object.keys(value[row])[cell]]; 
 
    } 
 
    table.appendChild(tr); 
 
    } 
 
    document.getElementById('tableq3').appendChild(table); 
 
} 
 
q3Calc();

td { 
 
    padding: 10px; 
 
    border: solid 1px #ddd; 
 
}

<div id="tableq3"></div>

Answer 2

主な問題は、あなたが（この場合にはオブジェクト）の各要素にアクセスしなかったことであったことを伝えたいです配列（割り当てた後はrowを使用したことはありません）。

次に、各オブジェクト内でキーを使用したことはありません（たびたびvalueを呼び出していました。これは、毎回配列全体を取得するたびに意味します）。

const q3Msg = document.getElementById('tableq3'); 
 

 
var value = [{ 
 
    id: 1, 
 
    result: 65, 
 
    situation: 'YES' 
 
}, { 
 
    id: 2, 
 
    result: 22, 
 
    situation: 'NO' 
 
}]; 
 

 
function q3Calc() { 
 
    q3Msg.classList.remove('hidden'); 
 

 
    var table = document.createElement('tbody'), tr, td, row, cell; 
 
    for (row = 0; row < value.length; row++) { 
 
     console.log(value[row]); 
 
     tr = document.createElement('tr'); 
 
     for (let key in value[row]) { 
 
      td = document.createElement('td'); 
 
      td.innerHTML = value[row][key]; 
 
      tr.appendChild(td); 
 
     } 
 
     table.appendChild(tr); 
 
    } 
 
    document.getElementById('tableq3').appendChild(table); 
 
} 
 

 
q3Calc();

td { 
 
    padding: 5px; 
 
}

<div id='tableq3'> 
 
</div>

Answer 3

あなたがそれをしたいですか？

const q3Msg = document.getElementById('tableq3'); 
 

 
var value = [{ 
 
    id: 1, 
 
    result: 65, 
 
    situation: 'YES' 
 
}, { 
 
    id: 2, 
 
    result: 22, 
 
    situation: 'NO' 
 
}]; 
 

 
function q3Calc() { 
 
    // q3Msg.classList.remove('hidden'); 
 

 
    var table = document.createElement('tbody'), tr, td, row, cell; 
 
    for (row = 0; row < value.length; row++) { 
 
     console.log(value); 
 
     tr = document.createElement('tr'); 
 
     for (cell = 0; cell < 3; cell++) { 
 
      td = document.createElement('td'); 
 
      tr.appendChild(td); 
 
      td.innerHTML = '['+value[row].id+','+value[row].result+','+value[row].situation+']'; 
 
     } 
 
     table.appendChild(tr); 
 
    } 
 
    document.getElementById('tableq3').appendChild(table); 
 
} 
 
q3Calc();

<div id="tableq3"></div>