为表中的每一行创建一个 div

Question

我的 html 中有 1 个表。 现在我想为每一行创建一个新的 div。 在这个 div 中是一个<p> ，它位于第一行的第一列中。 第一行的第二列也是如此。 我怎样才能做到这一点？

Answer 1

如果您的目标是使用一系列信息动态创建它，那么我最简单的方法是：

快速 JSFiddle 示例

假设您从一个空表和一个包含行 arrays 和内部字符串元素的数组开始：

<table id="target">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
</table>

let myInfo = [
  ['A', 'B', 'C'],
  ['X', 'Y', 'Z'],
];

我们先上表select：

let table = document.querySelector('#target');
let tbody = table.querySelector('tbody');

然后我们循环我们的myInfo数组中的每一行，创建一个 div 和 append 它到tbody

myInfo.forEach((row) => {
  let div = document.createElement('div');
  tbody.appendChild(div);
});

现在，对于每一行，我们将p元素创建为一个单元格。 我们使用传递的单元格参数（每行数组中的字符串）设置 innerHTML，并将 append 设置为我们在外部 scope 中创建的行 div。

myInfo.forEach((row) => {
  let div = document.createElement('div');
  tbody.appendChild(div);

  row.forEach((cell) => {
    let p = document.createElement('p');
    p.innerHTML = cell;
    div.appendChild(p);
  });
});

最后但同样重要的是，我们使用 css 使 div 和段落在语义上正确显示

tbody > div {
  display: table-row;
}
tbody > div > p {
  display: table-cell;
}