jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

查看本章节

查看作业目录

---

需求说明：

在 jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

• 点击“增加”超链接时，将表格中的第一条数据添加到表格的末尾
• 在输入框中输入 ID 号，点击“查询”超链接，表格将过滤出指定 ID 号的数据
• 点击每行对应的“删除”超链接，将删除对应行的数据
• 点击每行对应的“修改”超链接，ID、姓名和薪水变为可编辑状态，“修改”超链接变为“保存”，点击“保存”超链接，修改后的数据将被保存并显示

实现思路：

1. 在页面中添加”增加”超链接、文本输入框和“查询”超链接，添加一个表格，增加两条虚拟数据
2. 给“增加”超链接添加点击事件绑定方法，复制表格的第一行数据，并插入到节点的末尾
3. 给“查询”超链接添加点击事件绑定方法，获取表格中所有的ID，然后根据输入框中输入的 ID 进行匹配，匹配成功后将表格中的tr标签设置为显示，匹配失败将表格中的tr标签设置为隐藏
4. 给“删除”超链接添加点击事件绑定方法，获取当前标签父节点的父节点，并将其删除
5. 给“修改”超链接添加点击事件绑定方法，获取当前标签父节点td，继续获取td标签的父节点 tr，接着获取tr标签的前 3 个节点 td，获取td标签的内容，添加input标签，并设置其内容为td标签的内容，同时隐藏“修改”超链接，显示“保存”超链接
6. 给“保存”超链接添加点击事件绑定方法，获取input标签的内容，将其设置到父节点的td标签上，并删除input标签，同时隐藏“保存”超链接，显示“修改”超链接

实现代码：