Question

解决方案 我的问题是在HTML和JavaScript方面知之甚少，我为此道歉。有了更多经验，我可以清楚地看到这不是一个好问题，无论如何，我可以在这里找到我自己的问题的解决方案： best way to inject html using javascript

问题： 我试图用HTML显示整个列表。例如，如果有三个名称，我希望名称显示在<td>...</td>之间。有没有办法可以通过JavaScript将所有这些列表提取到HTML？

我知道我需要一个数组，可能还有for循环。也许我觉得太复杂了。

以下是HTML代码：

<table class = "table table-striped">
   <thead>
      <tr>
        <th>Full Name</th>
      </tr>
   </thead>
   <tbody>
      <tr id = "scoreList">
      <tr>....</tr>
      </tr>
   </tbody>
</table>

以下是JavaScript代码：

// Loop through customers
for( var i = 0; i < keys.length; i++){
    var k = keys[i]; 
   // var id = customers[k].id;
    var name = customers[k].name;

    // Add code here to show list of names in html 
}

Answer 1

假设您不使用框架，这是一种简单的方法：

// Generate the <td>'s.
const rendered = keys.map((v) => `<td>${v}</td>`).join('');
// Write them on the screen.
document.getElementById('scoreList').getElementsByTag('tr')[0].innerHTML = rendered;

Answer 2

使用纯javascript（并假设您需要<td>元素中的<tr>元素），您可以使用此功能。

var customers = [
  {
    firstName: 'John',
    lastName: 'Smith'
  },
  {
    firstName: 'William',
    lastName: 'Shakespear'
  }
]

for(var customer of customers) {
  var tdFN = document.createElement('TD');
  tdFN.innerHTML = customer.firstName;
  
  var tdLN = document.createElement('TD');
  tdLN.innerHTML = customer.lastName;
  
  var tr = document.createElement('TR');
  tr.appendChild(tdFN);
  tr.appendChild(tdLN);
  
  document.querySelector('table.table.table-striped tbody').appendChild(tr);
}

<table class="table table-striped">
  <thead>
    <tr>
      <th>Full Name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="scoreList">
    </tr>
  </tbody>
</table>

如何使用JavaScript注入HTML

2 个答案: