Javascript：如何为数组中的每个元素创建一个新的表格行？答案

【问题标题】：Javascript: How to Make a new table row for each elament in an array?Javascript：如何为数组中的每个元素创建一个新的表格行？
【发布时间】：2020-08-05 07:52:59
【问题描述】：

我在 javascript 中有一个包含名称的数组：

var names = ['JOHN', 'MIKE', 'SAM'];

我想制作一个 HTML 表格，其中数组中的每个元素都有自己的行。每次我们在数组中插入一个元素时，都应该附加一个具有该名称的新行

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
  <tr>
    <td>JOHN</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>MIKE</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>SAM</td>
    <td></td>
    <td></td>
  </tr>
</table>
<script>
var names = ['JOHN', 'MIKE', 'SAM'];
</script>
</body>
</html>

【问题讨论】：

到目前为止你尝试了什么？
.createElement() + (.appendChild() or .append() or .insertBefore() or .insertAdjacentElement() ) or .insertAdjacentHTML() or .insertRow() or .append() or ...
可能有用I found in others' question

标签： javascript html arrays html-table

【解决方案1】：

您可以使用以下内容在表中生成动态行..

将id 分配给表格并获取表格元素，例如，

const table = document.getElementById('table');

然后在数组上执行forEach() 以迭代并相应地生成动态行，例如，

const tr = document.createElement('tr');

由于共有三列（基于th 值），因此您可以为各个列生成td's，例如，

const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');

然后要包含来自数组的名称，你可以这样做，

const name = document.createTextNode(item);

然后你可以将名称附加到第一个 td like，

td1.appendChild(name);

然后您可以相应地逐个附加每个元素。

工作片段：

const names = ['JOHN', 'MIKE', 'SAM', 'Another Name', 'Yet Another Name'];

const table = document.getElementById('table');

names.forEach((item,index) => {
    const tr = document.createElement('tr');   

    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');

    const name = document.createTextNode(item);

    td1.appendChild(name);
    
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    table.appendChild(tr);
})

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%" id="table">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
</table>
</body>
</html>

【讨论】：

"每次我们在数组中插入一个元素时，都应该附加一个具有该名称的新行"
@Andreas，它已经像那样工作了，看我现在已经向数组中添加了另外两个项目。所以还有另外两行动态生成..（添加新项目的编辑答案） ..
对我来说，这听起来像是该阵列上每个.push() 上的更新。但是当你的 "accept the solution..." 起作用时，情况似乎并非如此。
@Andreas 代码运行良好，这正是我想要的。为什么你认为这个答案不应该被接受？请详细说明。