正文

学会用JavaScript动态创建表格：轻松实现表格数据的添加与展示

/0 浏览量
0330

动态创建表格是JavaScript中一个非常有用的功能，它允许我们根据需要添加或删除表格行，同时还能将数据以表格形式展示出来。在本篇文章中，我们将学习如何使用JavaScript和HTML来动态创建表格，以及如何添加和展示数据。

1. 创建基本的HTML表格结构

首先，我们需要创建一个基本的HTML表格结构。以下是创建一个简单表格的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="table.js"></script>
</body>
</html>

在这个例子中，我们创建了一个包含三个列标题（姓名、年龄、性别）的表格。

2. 使用JavaScript添加数据

接下来，我们将使用JavaScript来添加数据到表格中。在下面的示例中，我们将添加一个包含姓名、年龄和性别的对象到表格中：

// 创建一个对象，表示表格数据
const rowData = {
    name: '张三',
    age: 20,
    gender: '男'
};

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

// 创建一个新的表格行
const row = table.insertRow(-1);

// 创建列单元格，并填充数据
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
cell1.innerHTML = rowData.name;
cell2.innerHTML = rowData.age;
cell3.innerHTML = rowData.gender;

在这个例子中，我们首先创建了一个包含表格数据的对象rowData，然后通过getElementById方法获取到表格元素。接着，我们使用insertRow方法添加一个新的行到表格中，并使用insertCell方法添加列单元格。最后，我们将数据填充到这些单元格中。

3. 动态添加多行数据

为了实现动态添加多行数据，我们可以创建一个函数，该函数接受一个包含多个对象的数组作为参数，并遍历这个数组来添加数据到表格中：

// 创建一个包含多个对象的数组
const rowsData = [
    { name: '李四', age: 25, gender: '男' },
    { name: '王五', age: 30, gender: '女' },
    { name: '赵六', age: 22, gender: '男' }
];

// 添加多行数据到表格
function addRowsToTable(data) {
    const table = document.getElementById('myTable');
    data.forEach(rowData => {
        const row = table.insertRow(-1);
        Object.values(rowData).forEach(text => {
            const cell = row.insertCell(0);
            cell.innerHTML = text;
        });
    });
}

// 调用函数，添加数据
addRowsToTable(rowsData);

在这个例子中，我们定义了一个名为addRowsToTable的函数，它接受一个包含多个对象的数组data作为参数。然后，我们遍历这个数组，并为每个对象创建一个新行。对于每个对象，我们使用Object.values获取其属性值，并将这些值添加到表格的单元格中。

4. 总结

通过以上步骤，我们学会了如何使用JavaScript动态创建表格，并添加和展示数据。在实际开发中，我们可以根据需要添加更多的功能，如删除行、排序等。希望这篇文章能帮助你更好地掌握JavaScript动态创建表格的技巧。

-- 展开阅读全文 --