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

查看本章节

查看作业目录


需求说明:

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

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

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

实现思路:

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

实现代码:

上一篇:C# bool.tryparse


下一篇:Java指定保留小数位数的方法