纯原生js实现table表格的增删

下面是关于纯原生JS实现table表格的增删的攻略：

实现前必备知识

在开始实现表格的增删功能之前，有几点需要准备：

1. HTML表格的结构
2. css样式控制
3. 表格数据的动态绑定
4. 监听HTML元素的事件
5. 通过JS操作HTML元素

实现过程

1. 首先创建一个空表格，代码如下：

```html

Name	Age	Gender	操作

```

1. 接着，在JS代码里，声明一个对象数组，用于存储表格数据，例如：

javascript
const data = [
{name: '小明', age: 20, gender: '男'},
{name: '小红', age: 18, gender: '女'},
{name: '小刚', age: 22, gender: '男'}
];

1. 通过js代码，将表格数据动态绑定到表格中，代码如下：

javascript
const tableBody = document.querySelector('#myTable tbody');
data.forEach(item => {
const tr = document.createElement('tr');
const tdName = document.createElement('td');
tdName.textContent = item.name;
const tdAge = document.createElement('td');
tdAge.textContent = item.age;
const tdGender = document.createElement('td');
tdGender.textContent = item.gender;
const tdDelete = document.createElement('td');
tdDelete.innerHTML = '<a href="javascript:;" class="delete">删除</a>';
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdGender);
tr.appendChild(tdDelete);
tableBody.appendChild(tr);
});

1. 接着，实现表格数据的添加功能。为“添加”按钮绑定事件，并通过用户输入的参数，将数据添加到表格中，代码如下：

javascript
const addBtn = document.querySelector('#addBtn');
addBtn.addEventListener('click', () => {
const name = prompt('输入姓名');
const age = parseInt(prompt('输入年龄'));
const gender = prompt('输入性别');
const tr = document.createElement('tr');
const tdName = document.createElement('td');
tdName.textContent = name;
const tdAge = document.createElement('td');
tdAge.textContent = age;
const tdGender = document.createElement('td');
tdGender.textContent = gender;
const tdDelete = document.createElement('td');
tdDelete.innerHTML = '<a href="javascript:;" class="delete">删除</a>';
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdGender);
tr.appendChild(tdDelete);
tableBody.appendChild(tr);
});

1. 最后，实现表格数据的删除功能。为“删除”按钮绑定事件，并通过JS找到所在的行，并将其从表格中移除，代码如下：

javascript
tableBody.addEventListener('click', e => {
const target = e.target;
if (target.classList.contains('delete')) {
const tr = target.parentNode.parentNode;
tableBody.removeChild(tr);
}
});

至此，纯原生JS实现table表格的增删功能的攻略就完成了。下面提供两个完整的示例说明。

示例说明

示例一

在这个示例中，我们将使用上述攻略中的代码，演示如何实现动态的增加和删除表格数据的功能。请按照以下步骤操作：

1. 在HTML文件中添加上述的HTML代码和CSS样式。

2. 在JS文件中添加上述的JS代码。

3. 运行HTML文件，你会看到一个空表格。

4. 输入数据到文本框中，并单击“添加”按钮，你将在表格中添加一行数据。

5. 将鼠标放在“删除”按钮上，单击，你将从表格中删除该行数据。

示例二

在这个示例中，我们将展示如何对已有的表格数据进行修改的功能。请按照以下步骤操作：

1. 在HTML文件中添加上述的HTML代码和CSS样式。

2. 在JS文件中添加上述的JS代码。

3. 运行HTML文件，你会看到包含了示例一中的数据的表格。

4. 双击某个单元格，该单元格将变为可编辑状态。

5. 输入新的值，再次双击该单元格或者按下回车键，该单元格将变为不可编辑状态，并且修改后的值也会被保存下来。

至此，两个示例完整展示了如何使用纯原生JS实现table表格的增删和修改的功能。