正文

孩子，想知道如何用JavaScript创建表格行（tr）和单元格（td）吗？快来学学这招，轻松打造你的表格世界！

/0 浏览量
0609

嘿，小朋友！今天要和你分享一个超有趣的小技巧——用JavaScript来创建表格行和单元格！听起来是不是很酷？别急，接下来我会一步一步地教你如何用代码在网页上打造出你自己的表格世界。

了解基本结构

首先，我们来了解一下表格的基本结构。表格由行（tr）、单元格（td）和列（col）组成。行是由单元格组成，而单元格里面可以放置文本、图片等各种内容。

准备工作

在开始之前，我们需要准备一个HTML文件。在这个文件中，我们会添加一个容器元素，用于放置我们的表格。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
    <div id="tableContainer"></div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个id为tableContainer的div元素，这个div将会作为我们表格的容器。

编写JavaScript代码

现在，我们来编写JavaScript代码。这段代码将会创建表格行和单元格，并将它们添加到我们的容器中。创建一个新的JavaScript文件，命名为script.js，然后按照以下步骤进行：

// 获取容器元素
const container = document.getElementById('tableContainer');

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

// 创建表格头（可选）
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');

// 添加表头单元格
const headerCells = ['姓名', '年龄', '城市'];
headerCells.forEach(text => {
    const th = document.createElement('th');
    th.textContent = text;
    headerRow.appendChild(th);
});

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

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

// 添加表格行和单元格
const data = [
    { name: '小明', age: 10, city: '北京' },
    { name: '小红', age: 12, city: '上海' },
    { name: '小刚', age: 11, city: '广州' }
];

data.forEach(item => {
    const row = document.createElement('tr');
    const cells = ['姓名', '年龄', '城市'];

    cells.forEach(key => {
        const td = document.createElement('td');
        td.textContent = item[key];
        row.appendChild(td);
    });

    tbody.appendChild(row);
});

table.appendChild(tbody);

// 将表格添加到容器中
container.appendChild(table);

在上面的代码中，我们首先获取了容器元素，然后创建了表格、表头和表格体。接着，我们使用了一个简单的数据数组来表示表格内容，并通过遍历这个数组来创建行和单元格。

运行效果

完成上述代码后，将HTML和JavaScript文件放在同一个目录下，然后打开HTML文件。你将会看到一个包含三行三列的表格，分别显示了姓名、年龄和城市信息。

怎么样，是不是很简单？通过这个例子，你学会了如何用JavaScript创建表格行和单元格。现在，你可以尝试自己动手修改数据，甚至可以添加一些样式，让表格更加美观。希望你喜欢这个学习过程，祝你玩得开心！

-- 展开阅读全文 --