javascript 动态创建表格的2种方法总结

当我们需要在网页中插入大量的数据时，常常会选择将数据以表格的形式展示出来。使用JS动态创建表格，不仅可以大大减轻前端工作量，还可以根据数据动态生成表格，增加用户体验。

本篇攻略将介绍2种最常见的JS动态创建表格的方法，分别是通过innerHTML方法和DOM API的createElement方法。下面依次介绍这两种方法：

一、innerHTML方法

通过innerHTML方法创建表格的步骤如下：

1. 在HTML页面中准备一个容器元素来存放表格，比如div或table元素。
2. 获取该容器元素的引用。
3. 创建一个table标签以及表头tr和td标签，设置其内容。
4. 根据需求，使用循环遍历将数据填充至表格中。
5. 将表格通过innerHTML方法插入到容器元素中。

下面是一段示例代码，它通过innerHTML方法创建了一个2x3的表格，并将其插入到一个id为table_container的div元素中：

// 获取容器元素引用
var container = document.getElementById("table_container");

// 创建table标签及表头tr和td标签
var table = "<table border='1'>";
table += "<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>";

// 遍历数据，添加至表格中
for(var i = 0; i < data.length; i++){
    table += "<tr>";
    table += "<td>" + data[i].name + "</td>";
    table += "<td>" + data[i].age + "</td>";
    table += "<td>" + data[i].gender + "</td>";
    table += "</tr>";
}

table += "</table>";

// 将表格插入容器元素中
container.innerHTML = table;

二、DOM API的createElement方法

第二种方法是使用DOM API的createElement方法，创建表格的步骤如下：

1. 创建一个table元素。
2. 创建表头tr和td元素，并设置其内容。
3. 根据需求，使用循环遍历将数据填充至表格中。
4. 将表格插入到容器元素中。

下面是一段示例代码，它通过createElement方法创建了一个2x3的表格，并将其插入到id为table_container的div元素中：

// 获取容器元素引用
var container = document.getElementById("table_container");

// 创建table元素
var table = document.createElement("table");
table.setAttribute("border", "1");

// 创建表头tr和td元素，并设置其内容
var headRow = document.createElement("tr");
var headCell1 = document.createElement("td");
var headCell2 = document.createElement("td");
var headCell3 = document.createElement("td");
headCell1.appendChild(document.createTextNode("姓名"));
headCell2.appendChild(document.createTextNode("年龄"));
headCell3.appendChild(document.createTextNode("性别"));
headRow.appendChild(headCell1);
headRow.appendChild(headCell2);
headRow.appendChild(headCell3);
table.appendChild(headRow);

// 遍历数据，添加至表格中
for(var i = 0; i < data.length; i++){
    var dataRow = document.createElement("tr");
    var dataCell1 = document.createElement("td");
    var dataCell2 = document.createElement("td");
    var dataCell3 = document.createElement("td");
    dataCell1.appendChild(document.createTextNode(data[i].name));
    dataCell2.appendChild(document.createTextNode(data[i].age));
    dataCell3.appendChild(document.createTextNode(data[i].gender));
    dataRow.appendChild(dataCell1);
    dataRow.appendChild(dataCell2);
    dataRow.appendChild(dataCell3);
    table.appendChild(dataRow);
}

// 将表格插入容器元素中
container.appendChild(table);

以上就是两种常用的JS动态创建表格的方法，不同的方法具有各自的优缺点，根据实际应用场景选择适合的方法即可。