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


实现代码:

相关文章
|
4月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
4月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
96 0
|
3月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
33 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
4月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
4月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
3月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
45 0
|
4月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
4月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
4月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
4月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)