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是，而下一行2 22否

Answer 1

你的问题在td.innerHTML = value;。将其替换为td.innerHTML = value[row][Object.keys(value[row])[cell]];以获得预期值。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

你想要吗？

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;