javascript如何创建表格(javascript绘制表格的二种方法)

关于“javascript如何创建表格(javascript绘制表格的二种方法)”的完整攻略，我会给你细致的讲解。这里介绍两种方法。

方法一：使用HTML table元素

在HTML中，table元素可以用来创建和显示表格的基本结构。可以在table标签内使用tr元素定义表格的各行，并在每个tr元素中使用td或th元素定义单元格。

JavaScript代码可以通过选择HTML中的table元素，并在其内部添加tr、td元素来创建和绘制表格。下面是一个示例：

// 找到 HTML table 元素
let table = document.querySelector("#myTable");

// 创建表头
let header = document.createElement("thead");
let row = header.insertRow(0);
let cell = row.insertCell(0);
cell.innerHTML = "姓名"
cell = row.insertCell(1);
cell.innerHTML = "年龄"

// 创建表格内容
let body = document.createElement("tbody");
row = body.insertRow(0);
cell = row.insertCell(0);
cell.innerHTML = "张三";
cell = row.insertCell(1);
cell.innerHTML = 22;
row = body.insertRow(1);
cell = row.insertCell(0);
cell.innerHTML = "李四";
cell = row.insertCell(1);
cell.innerHTML = 25;

// 将表头和表格内容添加到 table 元素中
table.appendChild(header);
table.appendChild(body);

上面代码创建了一个包含两行两列的表格，并添加了姓名和年龄这两项内容。

方法二：使用字符串拼接

除了使用HTML中的table元素来创建表格之外，也可以使用字符串拼接的方式创建表格。这种方法比较灵活，并且可以通过JavaScript来处理表格中的数据。下面是一个示例：

// 创建一个数组，包含表格中的数据
let data = [
  { name: "张三", age: 22 },
  { name: "李四", age: 25 },
];

// 创建一个变量，用于保存表格的HTML代码
let tableHtml = "<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody>";

// 迭代数据数组，生成表格的行和列
for (let i = 0; i < data.length; i++) {
  let rowHtml = `<tr><td>${data[i].name}</td><td>${data[i].age}</td></tr>`;
  tableHtml += rowHtml;
}

// 添加表格尾部的 HTML 代码
tableHtml += "</tbody></table>";

// 将表格HTML代码添加到页面中
const container = document.querySelector("#myTable");
container.innerHTML = tableHtml;

上述代码创建了一个包含姓名和年龄的简单表格，使用了字符串拼接的方式将HTML代码拼接起来，并将表格添加到页面中。

以上是javascript绘制表格的二种方法，可以根据实际需求选择适合自己的方法。