JavaScript 中操作表格的技巧180

简介

表格是网页中常用的元素，用于展示和组织数据。JavaScript 提供了丰富的 API 来操作表格，从而增强网页的交互性和动态性。

创建表格

使用 JavaScript 可以动态创建表格。以下代码展示了如何创建一个包含头部和主体行的表格：
const table = ('table');
const thead = ('thead');
const tbody = ('tbody');
const headRow = ('tr');
const bodyRow1 = ('tr');
const bodyRow2 = ('tr');
// 创建表头
const headerCells = ['Name', 'Age', 'City'];
(header => {
const th = ('th');
= header;
(th);
});
// 创建主体行
const row1Data = ['John', 25, 'New York'];
const row2Data = ['Jane', 30, 'London'];
[row1Data, row2Data].forEach(rowData => {
const tr = ('tr');
(data => {
const td = ('td');
= data;
(td);
});
(tr);
});
// 组装表格
(headRow);
(thead);
(tbody);
// 将表格添加到页面
(table);

添加和删除行

JavaScript 允许动态添加和删除表格行。insertRow() 方法可以插入新行，deleteRow() 方法可以删除现有行。以下代码演示如何动态添加一行：
// 获取表格
const table = ('table');
// 创建新行
const newRow = (1); // 在第二行插入新行
// 创建新行的单元格
const nameCell = (0);
const ageCell = (1);
const cityCell = (2);
// 设置单元格内容
= 'Michael';
= 28;
= 'Paris';

添加和删除列

与行类似，JavaScript 也允许动态添加和删除表格列。insertColumn() 方法可以插入新列，deleteColumn() 方法可以删除现有列。以下代码演示如何动态添加一列：
// 获取表格
const table = ('table');
// 创建新列
const newColumn = (1); // 在第二列插入新列
// 设置表头
const headerCell = ('thead tr th:nth-child(1)');
= 'Occupation';
// 设置主体行
('tbody tr').forEach(tr => {
const newCell = (1);
= 'Software Engineer';
});

获取数据

JavaScript 提供了多种方法来获取表格中的数据。rows 属性返回表格中的行，cells 属性返回行中的单元格。以下代码演示如何获取表格数据：
// 获取所有行的数据
const rows = ;
for (let i = 0; i < ; i++) {
(`Row ${i + 1}:`);
const cells = rows[i].cells;
for (let j = 0; j < ; j++) {
(cells[j].textContent);
}
}

修改样式

JavaScript 可以通过 CSS 属性修改表格的样式。style 属性可以设置单个单元格的样式，而className 属性可以设置整行的样式。以下代码演示如何修改表格样式：
// 设置表头样式
const headerCell = ('thead tr th:nth-child(1)');
= 'lightgray';
= 'bold';
// 设置主体行样式
('tbody tr').forEach(tr => {
= 'table-row';
});
// 设置单元格样式
const cell = ('tbody tr:nth-child(2) td:nth-child(2)');
= 'blue';

JavaScript 提供了丰富的 API 来操作表格，包括创建、添加和删除行和列、获取数据以及修改样式。通过使用这些 API，可以创建交互式和动态的表格，从而增强网页的用户体验。

2024-12-11

上一篇：JavaScript 的游戏世界：互动式娱乐的创新之路

下一篇：JavaScript 的炫目效果