javascript - 用数组填充 html 表的问题

Question

希望能就我遇到的问题获得一些帮助（这里是Javascript新手！）

我正在尝试用一些数组填充 HTML 表。我希望各种数组中的每个值都在自己的行上。

因此，如果我的数组是病例和死亡，我希望病例[1]、死亡[1] 都在第 1 行。

第 2 行的病例 [2]、死亡 [2] 等。

我现在遇到的问题是虽然数组正在填充，但它们都在我的表中连接/连接到第 1 行。

他们只是添加到第 1 行，而不是进入单独的行（第 2、3、4 行等）

我怎样才能做到这一点？

    function Table(){
    
    var dResponse = [
    {"state":entered_states.slice(0),"cases":cases.slice(0),"deaths":deaths.slice(0),"drate":drate.slice(0)}
    ];

    var results=document.getElementById('Results');
    results.innerHTML += "<tr><th>State</th><th>Cases</th><th>Deaths</th><th>Death rate</th></tr>";
        for(var obj in dResponse){
        results.innerHTML += "<tr><td>"+dResponse[obj].state+"</td><td>"+dResponse[obj].cases+"</td><td>"+dResponse[obj].deaths+"</td><td>"+dResponse[obj].drate+"</td></tr>";
    
        }
    }
    window.onload=Table;

标签： javascript

Answer 1

您需要tbody在所有行之前添加。当您尝试追加时，它会为每一行<tr>创建一个新的tbody

  function Table(){
    
    var dResponse = [
    {"state":"test","cases":"test2","deaths":"test3","drate":"test4"},
    {"state":"test","cases":"test2","deaths":"test3","drate":"test4"},
    ];

    var results=document.getElementById('results-body');
        for(var obj in dResponse){
        results.innerHTML += "<tr><td>"+dResponse[obj].state+"</td><td>"+dResponse[obj].cases+"</td><td>"+dResponse[obj].deaths+"</td><td>"+dResponse[obj].drate+"</td></tr>";
    
        }
    }
    window.onload=Table;

<table id="Results">
  <thead>
  <tr><th>State</th><th>Cases</th><th>Deaths</th><th>Death rate</th></tr>
  </thead>
  <tbody id="results-body"></tbody>
</table>

如果你想改进你的代码：

• 检查 dResponse 是否具有使用属性hasOwnProperty
• 将结果存储在一个单独的变量中，并在循环结束时注入结果

function createTable() {
  let dResponse = [
    {'state': 'test', 'cases': 'test2', 'deaths': 'test3', 'drate': 'test4'},
    {'state': 'test', 'cases': 'test2', 'deaths': 'test3', 'drate': 'test4'},
  ];

  let results = document.getElementById('results-body');
  let html = '';
  for (let obj in dResponse) {
    if(dResponse.hasOwnProperty(obj)){
      html += '<tr><td>' + dResponse[obj].state + '</td><td>' + dResponse[obj].cases + '</td><td>' + dResponse[obj].deaths + '</td><td>' + dResponse[obj].drate + '</td></tr>';
    }
  }
  results.innerHTML = html;
}
window.onload = createTable;