js简单实现自动生成表格功能示例

下面我详细讲解“js简单实现自动生成表格功能”的完整攻略。

思路分析

在实现自动生成表格的功能之前，我们需要考虑以下几个问题：

1. 在什么情况下需要自动生成表格？

   在很多情况下，我们需要将一些数据展示在网页上，同时这些数据可能十分庞大，用表格的形式展示更加直观且易于阅读。

2. 自动生成表格需要哪些数据？

   自动生成表格需要一个二维数组，表示表格中的每一个单元格的内容。

3. 如何使用JavaScript生成表格？

   我们可以通过JavaScript选择所需的DOM元素，用innerHTML属性将生成的表格加入元素中。

实现步骤

具体实现自动生成表格的过程如下：

1. 提供数据

   首先，我们需要提供一个包含表格数据的二维数组，比如以下这个二维数组表示了一个3行4列的表格：

   javascript
var data = [
["Name", "Age", "Gender", "Major"],
["Tom", 20, "Male", "Computer Science"],
["Lily", 19, "Female", "Mathematics"],
["Lucy", 21, "Female", "Physics"]
];

2. 创建表格并填充数据

   我们可以通过以下代码创建一个空的表格元素，这个表格仅包含一个空的

   元素和
   元素：

   javascript
var table = document.createElement("table");
var thead = table.createTHead();
var tbody = table.createTBody();

   接着，我们可以使用JavaScript中的for循环将数据填充到表格中，具体实现如下：

   javascript
// 循环遍历所有数据
for (var i = 0; i < data.length; i++) {
// 创建当前行的<tr>元素
var row = document.createElement("tr");
// 循环遍历当前行的所有单元格内容，并插入到对应的<td>元素中
for (var j = 0; j < data[i].length; j++) {
var cell = document.createElement("td");
var cellText = document.createTextNode(data[i][j]);
cell.appendChild(cellText);
row.appendChild(cell);
}
// 将当前行的<tr>元素插入到<tbody>元素中
tbody.appendChild(row);
}

3. 插入表格到页面中

   将最终生成的表格插入到页面中，具体代码如下：

   javascript
// 将表格加入到文档流中
document.body.appendChild(table);

示例

下面我给出两个示例来说明如何使用上述方法生成表格。

示例1

我们要生成一个2行3列的表格，表格中的数据如下：

Name    Age     Gender
Tom     20      Male
Lily    19      Female

对应的二维数组为：

var data = [
  ["Name", "Age", "Gender"],
  ["Tom", 20, "Male"],
  ["Lily", 19, "Female"]
];

生成表格的完整代码如下：

var table = document.createElement("table");
var thead = table.createTHead();
var tbody = table.createTBody();

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");
  for (var j = 0; j < data[i].length; j++) {
    var cell = document.createElement("td");
    var cellText = document.createTextNode(data[i][j]);
    cell.appendChild(cellText);
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

示例2

我们要生成一个3行2列的表格，表格中的数据如下：

City            Population
New York        8,175,133
Los Angeles     3,971,883
Chicago         2,695,598

对应的二维数组为：

var data = [
  ["City", "Population"],
  ["New York", "8,175,133"],
  ["Los Angeles", "3,971,883"],
  ["Chicago", "2,695,598"]
];

生成表格的完整代码如下：

var table = document.createElement("table");
var thead = table.createTHead();
var tbody = table.createTBody();

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");
  for (var j = 0; j < data[i].length; j++) {
    var cell = document.createElement("td");
    var cellText = document.createTextNode(data[i][j]);
    cell.appendChild(cellText);
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

这就是我对于JavaScript简单实现自动生成表格功能的完整攻略，希望能对你有所帮助。