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


实现代码:

相关文章
|
3天前
|
XML JavaScript 数据格式
XML DOM - 导航节点
在XML DOM中,节点导航涉及利用如parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling等属性。通过这些关系,可以访问和操作XML文档结构。例如,给定一个XML文档,可以使用getElementsByTagName找到特定元素,并通过parentNode属性获取该元素的父节点。在提供的实例中,代码加载"books.xml",选取第一个<book>元素,并打印出其父节点的名称。
|
3天前
|
XML JavaScript 前端开发
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载"books.xml",获取第一个`<book>`元素的属性列表,然后利用`getNamedItem()`方法获取"category"属性的值并输出,同时显示属性数量。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的DOM节点树。通过循环节点,可以访问并处理每个元素,如提取值。示例代码展示了加载XML字符串到`xmlDoc`后,遍历根元素的所有子节点,打印出节点名及文本值,例如:"title: Everyday Italian"、"author: Giada De Laurentiis"和"year: 2005"。
|
3天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件"books.xml",然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
3天前
|
XML JavaScript 数据格式
XML DOM 节点列表
`getElementsByTagName()` 和 `childNodes` 返回 XML DOM 中的节点列表,表现为按顺序排列的节点集合。节点通过 0 开始的索引访问。例如,以下代码加载 "books.xml",获取所有 `<title>` 元素的节点列表,然后提取第一个 `<title>` 的文本内容:`xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue`,结果为 "Everyday Italian"。
|
2天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
17 1
|
2天前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
8 2
|
3天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问 XML 文档中的节点,返回一个节点列表(Node List),类似数组。可通过循环或导航节点关系来遍历和访问这些节点。示例代码加载 "books.xml" 到 xmlDoc,将结果存入变量 x。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问每个元素并提取其值。示例代码展示了一个XML文档的遍历过程,输出了所有子节点的名称和值,如"title: Everyday Italian"等。首先加载XML到xmlDoc,然后获取根元素的子节点,并依次打印节点名及文本内容。
|
3天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法从 `xmlDoc` 加载 "books.xml",创建一个包含匹配节点的节点列表。该列表可遍历以访问每个节点,实现对 XML 文档的节点访问和导航。

相关课程

更多