JavaScript 动态生成 HTML 表格 - 使用集合创建行和列 - 常规

您可以使用 JavaScript 来动态生成 HTML 表格的行和列。您可以通过以下步骤来实现：

创建一个空的 HTML 表格元素，例如 <table id='myTable'></table>。
在 JavaScript 中，使用 document.getElementById 方法获取表格元素的引用。

var table = document.getElementById('myTable');

创建一个包含表格行和列的数据集合，例如一个包含对象的数组。

var data = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'Paris' },
  { name: 'Tom', age: 35, city: 'London' }
];

使用循环遍历数据集合，并在每次迭代中创建一个新的表格行和表格单元格。将单元格的内容设置为相应数据对象的属性值。

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow(i);

  var cell1 = row.insertCell(0);
  cell1.innerHTML = data[i].name;

  var cell2 = row.insertCell(1);
  cell2.innerHTML = data[i].age;

  var cell3 = row.insertCell(2);
  cell3.innerHTML = data[i].city;
}

在上述代码中，insertRow 方法用于在表格中插入新行，insertCell 方法用于在行中插入新单元格。innerHTML 属性用于设置单元格的内容。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<body>

<table id='myTable'></table>

<script>
var table = document.getElementById('myTable');

var data = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'Paris' },
  { name: 'Tom', age: 35, city: 'London' }
];

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow(i);

  var cell1 = row.insertCell(0);
  cell1.innerHTML = data[i].name;

  var cell2 = row.insertCell(1);
  cell2.innerHTML = data[i].age;

  var cell3 = row.insertCell(2);
  cell3.innerHTML = data[i].city;
}
</script>

</body>
</html>

这将创建一个包含 3 行和 3 列的 HTML 表格，并使用数据集合中的值填充表格单元格。您可以根据需要修改数据集合的内容和表格的样式。