如何使用 JavaScript 创建和操作表格156

JavaScript 是一种强大的语言，可用于创建和操作表格。表格是 web 页面上用于显示和收集数据的常用元素。

创建表格

要使用 JavaScript 创建表格，可以使用 () 方法创建一个 table 元素。然后，您可以使用 appendChild() 方法将表格添加到页面中。```javascript
// 创建一个表格
var table = ("table");
// 将表格添加到页面
(table);
```

添加表头

要添加表头，可以使用 和 元素。 元素包含表格的标题行，而 元素包含标题列。```javascript
// 创建表头
var thead = ("thead");
// 创建标题列
var th1 = ("th");
= "名称";
var th2 = ("th");
= "年龄";
// 将标题列添加到表头
(th1);
(th2);
// 将表头添加到表格
(thead);
```

添加表体

要添加表体，可以使用 和 元素。 元素包含表格的数据行，而 元素包含数据列。```javascript
// 创建表体
var tbody = ("tbody");
// 创建数据行
var tr1 = ("tr");
// 创建数据列
var td1 = ("td");
= "John";
var td2 = ("td");
= "25";
// 将数据列添加到数据行
(td1);
(td2);
// 将数据行添加到表体
(tr1);
// 将表体添加到表格
(tbody);
```

添加表脚

要添加表脚，可以使用 和 元素。 元素包含表格的脚注行，而 元素包含脚注列。```javascript
// 创建表脚
var tfoot = ("tfoot");
// 创建脚注列
var tf1 = ("td");
= "总计";
// 创建脚注行
var tr1 = ("tr");
// 将脚注列添加到脚注行
(tf1);
// 将脚注行添加到表脚
(tr1);
// 将表脚添加到表格
(tfoot);
```

操纵表格

一旦创建了表格，就可以使用 JavaScript 来操纵它。您可以添加、删除和修改行、列和单元格。

添加行

要添加行，可以使用 insertRow() 方法。该方法接受一个参数，该参数指定要在其中插入新行的位置。```javascript
// 在表格的开头添加一行
var newRow = (0);
```

删除行

要删除行，可以使用 deleteRow() 方法。该方法接受一个参数，该参数指定要删除的行。```javascript
// 删除表格的第二行
(1);
```

添加列

要添加列，可以使用 insertCell() 方法。该方法接受两个参数：第一个参数指定要在其中插入新列的位置，第二个参数指定新列的类型。```javascript
// 在表格的第二列中添加一列
var newCell = [0].insertCell(1);
```

删除列

要删除列，可以使用 deleteCell() 方法。该方法接受一个参数，该参数指定要删除的列。```javascript
// 删除表格的第三列
[0].deleteCell(2);
```

更改单元格值

要更改单元格值，可以使用 textContent 属性。该属性包含单元格的文本内容。```javascript
// 更改表格中第一个单元格的值
[0].cells[0].textContent = "新值";
```

2024-11-29

上一篇：JavaScript 揭秘：从入门到精通的全面指南

下一篇：JavaScript 正则表达式：终极指南