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标签,同时隐藏“保存”超链接,显示“修改”超链接


实现代码:

相关文章
|
机器学习/深度学习 数据采集 JavaScript
用深度学习提升DOM解析——自动提取页面关键区块
本文介绍了一次二手车数据爬虫事故的解决过程,从传统XPath方案失效到结合深度学习语义提取的成功实践。面对懂车帝平台的前端异步渲染和复杂DOM结构,通过Playwright动态渲染、代理IP隐藏身份,以及BERT模型对HTML块级语义识别,实现了稳定高效的字段提取。此方法抗结构变化能力强,适用于复杂网页数据采集,如二手车、新闻等领域。架构演进从静态爬虫到动态爬虫再到语义解析,显著提升效率与稳定性。
458 13
用深度学习提升DOM解析——自动提取页面关键区块
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
277 0
|
机器学习/深度学习 数据采集 存储
深度学习在DOM解析中的应用:自动识别页面关键内容区块
本文探讨了如何通过深度学习模型优化东方财富吧财经新闻爬虫的性能。针对网络请求、DOM解析与模型推理等瓶颈,采用代理复用、批量推理、多线程并发及模型量化等策略,将单页耗时从5秒优化至2秒,提升60%以上。代码示例涵盖代理配置、TFLite模型加载、批量预测及多线程抓取,确保高效稳定运行,为大规模数据采集提供参考。
435 0
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
187 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
214 0
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
241 2
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
316 1
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
254 0