使用 JavaScript 动态创建 HTML 表

动态创建 HTML 表是前端开发中常见的需求之一。在本文中，我们将介绍如何使用 JavaScript 动态创建 HTML 表，包括创建表格、添加表头、添加数据、修改表格属性等。

创建表格

要创建 HTML 表格，我们需要使用 JavaScript 创建一个 table 元素，并将其添加到 HTML 页面中。以下是示例代码：

// 创建表格元素
var table = document.createElement("table");

// 将表格添加到页面中的某个元素中
document.getElementById("table-container").appendChild(table);

上述代码创建了一个 table 元素，并将其添加到了页面中 id 为 table-container 的元素中。你也可以将表格添加到页面中的其他元素中，只需修改 document.getElementById("table-container") 部分即可。

添加表头

创建完成表格后，我们需要添加表头。表头一般包括表格的列名。以下是示例代码：

// 创建表头元素
var thead = document.createElement("thead");

// 创建行元素
var row = document.createElement("tr");

// 创建列元素并设置列名
var column1 = document.createElement("th");
column1.innerHTML = "姓名";
var column2 = document.createElement("th");
column2.innerHTML = "年龄";

// 将列元素添加到行元素中
row.appendChild(column1);
row.appendChild(column2);

// 将行元素添加到表头元素中
thead.appendChild(row);

// 将表头元素添加到表格中
table.appendChild(thead);

上述代码创建了一个包含两列列名的表头，并将其添加到表格中。你可以根据需要添加更多列名或更少列名，只需修改列名对应的代码即可。

添加数据

表格的数据一般存储在数组中。我们可以使用循环语句遍历数组，并将数据添加到表格中。以下是示例代码：

// 创建表体元素
var tbody = document.createElement("tbody");

// 数据数组
var data = [
  ["Peter", 25],
  ["Mary", 30],
  ["John", 35]
];

// 遍历数组
for (var i = 0; i < data.length; i++) {
  // 创建行元素
  var row = document.createElement("tr");

  // 创建列元素并设置数据
  var column1 = document.createElement("td");
  column1.innerHTML = data[i][0];
  var column2 = document.createElement("td");
  column2.innerHTML = data[i][1];

  // 将列元素添加到行元素中
  row.appendChild(column1);
  row.appendChild(column2);

  // 将行元素添加到表体元素中
  tbody.appendChild(row);
}

// 将表体元素添加到表格中
table.appendChild(tbody);

上述代码创建了一个包含三行数据的表体，并将其添加到表格中。你可以根据需要修改数据数组并添加更多行数据。

修改表格属性

我们可以使用 JavaScript 修改表格的各种属性，例如设置表格的边框、背景色等。以下是示例代码：

// 设置表格边框属性
table.setAttribute("border", "1");

// 设置表格背景色属性
table.style.backgroundColor = "lightgray";

上述代码将表格的边框属性设置为 1，将表格的背景色属性设置为灰色。你可以根据需要修改这些属性值。

现在，你已经掌握了使用 JavaScript 动态创建 HTML 表的基本步骤。祝你在前端开发中取得更多成果！