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

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

需求说明:


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


点击“增加”超链接时,将表格中的第一条数据添加到表格的末尾

在输入框中输入 ID 号,点击“查询”超链接,表格将过滤出指定 ID 号的数据

点击每行对应的“删除”超链接,将删除对应行的数据

点击每行对应的“修改”超链接,ID、姓名和薪水变为可编辑状态,“修改”超链接变为“保存”,点击“保存”超链接,修改后的数据将被保存并显示


67.png


实现思路:


在页面中添加”增加”超链接、文本输入框和“查询”超链接,添加一个表格,增加两条虚拟数据

给“增加”超链接添加点击事件绑定方法,复制表格的第一行数据,并插入到节点的末尾

给“查询”超链接添加点击事件绑定方法,获取表格中所有的ID,然后根据输入框中输入的 ID 进行匹配,匹配成功后将表格中的tr标签设置为显示,匹配失败将表格中的tr标签设置为隐藏

给“删除”超链接添加点击事件绑定方法,获取当前标签父节点的父节点,并将其删除

给“修改”超链接添加点击事件绑定方法,获取当前标签父节点td,继续获取td标签的父节点 tr,接着获取tr标签的前 3 个节点 td,获取td标签的内容,添加input标签,并设置其内容为td标签的内容,同时隐藏“修改”超链接,显示“保存”超链接

给“保存”超链接添加点击事件绑定方法,获取input标签的内容,将其设置到父节点的td标签上,并删除input标签,同时隐藏“保存”超链接,显示“修改”超链接


实现代码:

目录
打赏
0
0
0
0
6
分享
相关文章
|
4月前
|
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
39 0
jQuery+css3制作精美的2024圣诞节倒计时页面
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
57 0
|
7月前
|
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
59 2
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
78 1
|
7月前
|
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
45 0
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
63 2
DOM操作
【6月更文挑战第30天】DOM操作
67 1
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点

相关课程

更多