使用 JavaScript 动态创建和操作 HTML 表格187

在现代 Web 开发中，动态创建和操作 HTML 表格在许多情况下都是必不可少的。JavaScript 为我们提供了强大而灵活的工具，使我们能够轻松地完成这项任务。

创建表格

要使用 JavaScript 创建一个新的 HTML 表格，可以使用 ('table') 方法。例如：const table = ('table');

然后，我们可以使用 () 方法将子元素添加到表格中，例如表头 ()、表主体 () 和表尾 ()。const thead = ('thead');
const tbody = ('tbody');
const tfoot = ('tfoot');
(thead);
(tbody);
(tfoot);

填充表头

要填充表头，我们可以使用 元素中的 （表行）和 （表头单元格）元素。例如：const headerRow = ('tr');
const headerCell1 = ('th');
const headerCell2 = ('th');
= '姓名';
= '年龄';
(headerCell1);
(headerCell2);
(headerRow);

填充表主体

要填充表主体，我们可以使用 元素中的 和 （表数据单元格）元素。例如：const dataRow1 = ('tr');
const dataCell1 = ('td');
const dataCell2 = ('td');
= '张三';
= '25';
(dataCell1);
(dataCell2);
(dataRow1);

操作表格

JavaScript 还允许我们动态操作表格。我们可以使用 ()、() 和 () 等方法来添加、删除和插入行。// 添加新行
const newRow = ('tr');
(newRow);
// 删除行
(0); // 删除第一行
// 在特定位置插入行
(1, newRow); // 在第二行位置插入新行

事件监听

我们可以为表格元素添加事件监听器，以便在发生特定事件时执行代码。例如，我们可以使用 () 方法来监听点击事件：('click', function(event) {
();
});

此代码会在表格元素内的任何单元格被点击时触发，并记录被点击单元格的文本内容。

使用 JavaScript 创建和操作 HTML 表格是一种强大而灵活的技术，可用于创建动态和交互式的表格。我们可以动态创建表格元素、填充数据、操作表格并添加事件监听器以响应用户交互。通过掌握这些技术，我们可以创建功能强大且用户友好的 Web 应用程序。

2024-12-11

上一篇：如何在手机中使用 JavaScript

下一篇：JavaScript 中的赋值