JavaScript 表格：创建、操作和样式73

在 JavaScript 中，我们可以使用强大的 DOM 操作功能来创建、修改和操作 HTML 表格。本文将详细介绍如何在 JavaScript 中处理表格，包括创建、添加行和列、访问数据、样式化和事件处理。

创建表格

使用 JavaScript 创建表格的步骤如下：

创建元素创建表头，其中包含元素和元素创建表主体，其中包含元素和元素

例如，以下代码创建一个带有表头和表体的基本表格：

const table = ('table');
const thead = ('thead');
const tbody = ('tbody');
// 创建表头行
const headerRow = ('tr');
const headerCell1 = ('th');
= '姓名';
const headerCell2 = ('th');
= '年龄';
// 将表头单元格添加到表头行
(headerCell1);
(headerCell2);
// 将表头行添加到表头
(headerRow);
// 添加数据行
const dataRow = ('tr');
const dataCell1 = ('td');
= '小明';
const dataCell2 = ('td');
= '20';
// 将数据单元格添加到数据行
(dataCell1);
(dataCell2);
// 将数据行添加到表主体
(dataRow);
// 将表头和表主体添加到表格
(thead);
(tbody);
(table);

添加行和列

可以使用以下方法向现有表格中添加行和列：

insertRow() 和 deleteRow() 方法

这两个方法用于插入和删除表格行。insertRow() 方法在指定的索引处插入新行，而 deleteRow() 方法删除指定索引处的行。

insertCell() 和 deleteCell() 方法

这两个方法用于插入和删除表格单元格。insertCell() 方法在指定的索引处插入新单元格，而 deleteCell() 方法删除指定索引处的单元格。

例如，以下代码向表格中添加新行和单元格：

// 获取表格
const table = ('table');
// 在表格末尾插入新行
const newRow = ();
// 在新行中插入新单元格
const newCell1 = ();
= '小红';
const newCell2 = ();
= '18';

访问表格数据

可以使用以下属性和方法访问表格数据：

rows 属性

rows 属性返回表格中的行集合。

cells 属性

cells 属性返回表格中所有单元格的集合。

textContent 属性

textContent 属性返回单元格中的文本内容。

innerHTML 属性

innerHTML 属性返回单元格中的 HTML 内容。

例如，以下代码获取表格中第一行的第一个单元格的文本内容：

const table = ('table');
const firstRow = [0];
const firstCell = [0];
const cellText = ;

表格样式

可以使用 CSS 来设置表格的样式。以下是一些常用的 CSS 属性：

border

border 属性设置表格边框。

padding

padding 属性设置表格单元格内的填充。

margin

margin 属性设置表格单元格外的边距。

background-color

background-color 属性设置表格单元格的背景颜色。

例如，以下 CSS 样式将设置表格的边框、单元格填充和背景颜色：

table {
border: 1px solid black;
}
td {
padding: 5px;
background-color: #ffffff;
}

事件处理

可以使用事件监听器来处理表格中的事件，例如单击、双击和鼠标悬停。以下是一个处理表格中单击事件的示例：

// 获取表格
const table = ('table');
// 添加单击事件监听器
('click', function(e) {
// 获取被单击的单元格
const cell = ;
// 获取单元格中的文本内容
const cellText = ;
// 输出单元格文本内容
('被单击的单元格文本：', cellText);
});