使用 JavaScript 实现表格编辑79

在现代 Web 开发中，动态表格编辑已成为一项必备功能。通过使用 JavaScript，您可以轻松地创建允许用户创建、修改和删除表格数据的强大且直观的表格编辑器。

创建表格

为了创建表格，可以使用 JavaScript 的 `()` 方法。例如，要创建一个带有三个标题和五行的表格，可以使用以下代码：```javascript
const table = ('table');
// 创建标题行
const thead = ();
const trHead = ();
// 添加标题单元格
['ID', '名称', '价格'].forEach(title => {
const th = ();
= title;
});
// 创建数据行
const tbody = ();
for (let i = 0; i < 5; i++) {
const trBody = ();
// 添加数据单元格
for (let j = 0; j < 3; j++) {
const td = ();
= `数据${i + 1}-${j + 1}`;
}
}
```

添加、修改和删除数据

为了允许用户添加、修改和删除数据，您需要添加事件侦听器。例如，要添加新行，可以使用以下代码：```javascript
const addButton = ('add-button');
('click', () => {
const trBody = ();
// 添加数据单元格
for (let i = 0; i < 3; i++) {
const td = ();
= `New entry${}-${i + 1}`;
}
});
```

同样，您可以使用 `textContent` 属性修改单元格的内容，并使用 `deleteRow()` 方法删除行。

排序和过滤

为了增强表格功能，您可以添加排序和过滤功能。对于排序，您可以使用 `()` 方法对数据进行排序，然后重新填充表格。对于过滤，您可以使用 `()` 方法过滤出符合特定条件的数据。```javascript
// 排序
const sortButton = ('sort-button');
('click', () => {
const data = [];
('tr').forEach(row => {
const cells = ('td');
const id = cells[0].textContent;
const name = cells[1].textContent;
const price = cells[2].textContent;
({ id, name, price });
});
((a, b) => ());
= '';
(item => {
const trBody = ();
for (const key in item) {
const td = ();
= item[key];
}
});
});
// 过滤
const filterInput = ('filter-input');
('input', () => {
const filterValue = ();
('tr').forEach(row => {
const cells = ('td');
const name = cells[1].();
if ((filterValue)) {
= '';
} else {
= 'none';
}
});
});
```