javascript - 用Javascript实现TDS自动化

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是，在第二行中显示22 22否

最佳答案

您的问题出在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>

关于javascript - 用Javascript实现TDS自动化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44558142/