CSS 如何使用JavaScript填充表格

在本文中，我们将介绍如何使用JavaScript动态地填充HTML表格。对于需要在表格中添加数据或创建动态表格的开发者来说，这是一个非常重要且常见的需求。

阅读更多：CSS 教程

什么是表格

HTML表格是以行和列的形式显示数据的一种标签元素。它是由<table>标签包围，并使用<tr>标签定义行，而每一行又被拆分成一或多个以<td>标签定义的单元格。每个单元格可以容纳各种元素，比如文本、图片或其他HTML内容。

动态地创建表格

当我们需要在网页上显示大量的数据时，手动创建表格是不切实际的。这时候，我们可以使用JavaScript来动态地创建表格，并将数据填充进去。

首先，我们需要在HTML页面中定义一个空的表格，可以使用一个<table>标签来实现：

<table id="myTable"></table>

接下来，在JavaScript中，我们可以使用document.createElement()方法来创建需要的表格行和单元格，并使用appendChild()方法将它们添加到表格中。下面是一个简单的示例，展示了如何创建一个包含3行2列的表格：

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

for (var i = 0; i < 3; i++) {
  var row = document.createElement("tr");

  for (var j = 0; j < 2; j++) {
    var cell = document.createElement("td");
    cell.textContent = "Row " + (i + 1) + ", Cell " + (j + 1);
    row.appendChild(cell);
  }

  table.appendChild(row);
}

以上代码将创建一个包含3行2列的表格，并填充每个单元格的内容。在这个示例中，我们使用了textContent属性来设置每个单元格的文本内容。

使用JavaScript填充表格

有时候，我们需要从外部数据源动态地填充表格。这时候，我们可以使用JavaScript来获取数据，并将其添加到表格中。

假设我们有一个存储数据的数组，每个数组元素代表一行数据。我们可以使用循环来遍历数组，并创建表格行和单元格来填充数据。

var data = [
  { name: "John", age: 25, city: "New York" },
  { name: "Jane", age: 30, city: "Los Angeles" },
  { name: "Bob", age: 35, city: "Chicago" }
];

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

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");

  var nameCell = document.createElement("td");
  nameCell.textContent = data[i].name;
  row.appendChild(nameCell);

  var ageCell = document.createElement("td");
  ageCell.textContent = data[i].age;
  row.appendChild(ageCell);

  var cityCell = document.createElement("td");
  cityCell.textContent = data[i].city;
  row.appendChild(cityCell);

  table.appendChild(row);
}

以上代码将创建一个包含3行3列的表格，并将数据填充到表格中。我们使用循环遍历数据数组，并在每个循环中创建新的表格行以及相应的单元格。然后，我们将数据赋值给每个单元格的textContent属性。