js 创建表格

在 JavaScript 中创建表格可以通过多种方式实现，常见的包括使用 DOM 操作手动创建元素，或者利用一些前端框架（如 React、Vue 等）的模板语法来生成。以下是使用纯 JavaScript 手动创建一个简单 HTML 表格的步骤和示例代码：

步骤：

定义表格结构：确定表格的行数、列数以及每个单元格的内容。
创建表格元素：使用 document.createElement 方法创建 <table> 元素。
创建行和单元格：为每一行创建一个 <tr> 元素，为每个单元格创建一个 <td> 元素，并设置其内容。
将单元格添加到行中：使用 appendChild 方法将 <td> 元素添加到 <tr> 元素中。
将行添加到表格中：同样使用 appendChild 方法将 <tr> 元素添加到 <table> 元素中。
将表格添加到页面中：最后将 <table> 元素添加到页面的某个容器元素中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 创建表格示例</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
    }
</style>
</head>
<body>

<div id="table-container"></div>

<script>
// 数据数组
const data = [
    { name: 'Alice', age: 24, city: 'New York' },
    { name: 'Bob', age: 27, city: 'Los Angeles' },
    { name: 'Charlie', age: 22, city: 'Chicago' }
];

// 创建表格元素
const table = document.createElement('table');

// 创建表头
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
['Name', 'Age', 'City'].forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表体
const tbody = document.createElement('tbody');
data.forEach(item => {
    const row = document.createElement('tr');
    ['name', 'age', 'city'].forEach(key => {
        const td = document.createElement('td');
        td.textContent = item[key];
        row.appendChild(td);
    });
    tbody.appendChild(row);
});
table.appendChild(tbody);

// 将表格添加到页面中
document.getElementById('table-container').appendChild(table);
</script>

</body>
</html>