查看本章节

查看作业目录


需求说明:

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

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

实现思路:

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

实现代码:

jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作的更多相关文章

  1. PHP与MYSQL结合操作——文章发布系统小项目(实现基本增删查改操作)

    php和mysql在一起几十年了,也是一对老夫老妻了,最近正在对他们的爱情故事进行探讨,并做了一个很简单的小东西——文章发布系统,目的是为了实现mysql对文章的基本增删查改操作 前台展示系统有:文章 ...

  2. 使用DOM进行xml文档的crud(增删改查)操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  3. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. MVC中 _ViewStart _Layout Index三个页面中的加载顺序

    MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...

  5. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  6. Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作

    1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: aci ...

  7. ssm 框架实现增删改查CRUD操作(Spring + SpringMVC + Mybatis 实现增删改查)

    ssm 框架实现增删改查 SpringBoot 项目整合 一.项目准备 1.1 ssm 框架环境搭建 1.2 项目结构图如下 1.3 数据表结构图如下 1.4 运行结果 二.项目实现 1. Emplo ...

  8. EF 外键不显示、如何让外键显示!增、删、改 操作时,外键不显示,只显示导航属性!

    一.问题描述:EF 外键不显示.如何让外键显示!增.删.改 操作时,外键不显示,只显示导航属性! EF 添加.增加.插入数据时,外键不显示! 二.解决方案:在根据数据库生成模型的时候,选中“在模型中” ...

  9. Mybatis基础配置及增删查改操作

    一.简介 平时我们都用JDBC访问数据库,除了需要自己写SQL之外,还必须操作Connection, Statement, ResultSet 这些其实只是手段的辅助类. 不仅如此,访问不同的表,还会 ...

  10. Java连接MySQL数据库及简单的增删查改操作

    主要摘自 https://www.cnblogs.com/town123/p/8336244.html https://www.runoob.com/java/java-mysql-connect.h ...

随机推荐

  1. 【面试】【Linux】【Web】基础概念

    1. HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol 2. TCP handshake https://en.wikipe ...

  2. 【Linux】【Services】【MessageQueue】搭建高可用rabbitMQ

    1. 简介 1.1. 官方网站: https://www.rabbitmq.com/ 1.2. 配置文档:https://docs.openstack.org/ha-guide/shared-mess ...

  3. HTTP协议及常见状态码

    超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文档的应用层协议.它被设计用于Web浏览器和Web服务器之间的通信,但它也可以用于其他目的. HTTP遵循经典的客户端-服务端模型,客户端打开一 ...

  4. List如何一边遍历,一边删除?

    1.新手常犯的错误 可能很多新手(包括当年的我,哈哈)第一时间想到的写法是下面这样的: public static void main(String[] args) { List<String& ...

  5. Linux 内核到底长啥样

    目录 一.简介 二.结构 地基 地面层 进程表 http进程 21进程 22进程 到文件系统 定时任务 管道 411进程 跃层 一.简介 今天,我来为大家解读一幅来自 TurnOff.us 的漫画 & ...

  6. 学习整理--flex布局(1)

    父元素容器属性 flex-direction: row(默认).row-reverse.column.column-reverse row: 横向正序排列子元素 colimn: 竖向正序排列子元素 r ...

  7. Sql 查询语句优化

    sql查询很慢,很多时候并不是数据量大,而是sql语法使用不正确,本文讲述了基础语法使用,避免一些不必要的坑. explain select * from user;--查询执行时间 目录 Sql 优 ...

  8. 共享资源库(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 既然要共享资源库,那就得先建一个可供共享的资源库文件,好吧,说得这么高大上,其实就是一个里面只有资源数据的mpp项目文件, ...

  9. vscode提示提示安装似乎损坏,请重新安装

    安装 Fix VSCode Checksums 插件 Ctrl+Shift+P , 输入Fix Checksums : Apply, 点击,重启即可

  10. CF1547B Alphabetical Strings 题解

    Content 我们有一个空的字符串,第 \(i\) 次操作我们可以将字母表中第 \(i\) 个字母加入字符串的最前面或最后面.我们称一个长度为 \(n\) 的字符串是合法的,当且仅当这个字符串可以通 ...