JS动态生成表格|极客笔记

JS动态生成表格

在网页开发中，经常会遇到需要动态生成表格的情况。通过JavaScript动态生成表格，可以方便地根据需求添加、删除、修改表格中的内容，实现页面的动态展示效果。本文将详细介绍如何使用JavaScript动态生成表格，并提供示例代码演示。

1. 创建表格的基本结构

在动态生成表格之前，首先需要创建表格的基本结构。通常，一个表格包含表头和表体两部分，表头用来显示列名，表体用来显示数据。

以下是一个简单的静态表格结构示例：

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

2. 使用JavaScript动态生成表格

通过JavaScript可以动态地创建、操作HTML元素。下面我们将使用JavaScript动态生成一个简单的表格，并添加一些数据。

// 获取表格容器
const table = document.getElementById('myTable');

// 创建表格头部
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');

const headers = ['姓名', '年龄', '性别'];
headers.forEach(headerText => {
    const th = document.createElement('th');
    th.appendChild(document.createTextNode(headerText));
    headerRow.appendChild(th);
});

thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表格体
const tbody = document.createElement('tbody');

const data = [
    ['张三', 25, '男'],
    ['李四', 30, '女']
];

data.forEach(rowData => {
    const row = document.createElement('tr');
    rowData.forEach(cellData => {
        const cell = document.createElement('td');
        cell.appendChild(document.createTextNode(cellData));
        row.appendChild(cell);
    });
    tbody.appendChild(row);
});

table.appendChild(tbody);

上述代码首先获取表格容器元素，并使用JavaScript创建了表格的头部和体部，并添加了一些数据。通过循环创建表格的行和列，实现了动态生成表格的效果。