使用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); 
} 

我有上述代碼在html中自動執行tds。但我有下面的圖像。

我如何可以顯示在一個單獨的TD每個數組索引？

例如，在第一行中，我想顯示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>