javascript - Javascript：如何遍历值数组并创建表行

Question

我正在从服务器获取数据，我想遍历这些值并将它们显示到表的第一列中。任何可以引导我走向正确方向的帮助将不胜感激。

Javascript

fetch(_____,{
}).then(data => {
    var mstone = data.MilName;

    var table = document.getElementById("milestone-table");
    var row = table.insertRow(table.rows.length);
    // var cell1 = row.insertCell(0);
    //var cell2 = row.insertCell(1);

    //cell1.setAttribute("style", "text-align:center");
    //cell2.setAttribute("style", "text-align:center");
    
    //Iterating through data values and trying to display onto table
    for(var i = 0; i < mstone.length; i++){
        var cell = row.insertCell(0);
        cell.setAttribute("style", "text-align:center");
        cell.innerHTML = mstone[i]; 
    }

}).catch(function(err){
    console.log("Fetch Problem: " + err);
});

标签： javascripthtmlcssarrays

Answer 1

您可以在不添加任何行的情况下以 HTML 格式设置表格，遍历响应数据并为每个项目添加行和单元格。

const data = ['foo', 'bar', 'baz'] // Dummy response data
const tbody = document.querySelector('tbody');

data.forEach(item => {
  const tr = tbody.insertRow();
  tr.insertCell().innerText = item
})

<table>
  <thead>
    <tr>
      <th>Column Heading</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>