栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery实现增删改查

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery实现增删改查

本文实例为大家分享了jQuery实现增删改查的具体代码,供大家参考,具体内容如下

  • jquery用的是1.11版本
  • css就用bootstrap吧
  • 因为增和改用了模态框修改,所以还用了bootstrap.js实现模态框的弹出和关闭

做了个简单的表格来实现功能

HTML代码段

//表格

  
  
   
   
   
   
   
   
   
  
  
  
编号 姓名 成绩 操作
1 张三 89
2 李四 91
3 刘一 80
//修改的模态框

Jquery代码段



ps:新人,class的命名有点不规范...将就看着吧

解说思路

ps:要记得对象缓存 _this = $(this).null

1.实现删的功能

首先准确地找到当前按钮的父级元素tr,然后remove()掉就实现了删的功能

2.实现改的功能

这里先做了个数组来存储已有的信息, 用遍历的方法each()放进数组,数组的数据再push()进模态框的input框val()可进行显示

点击模态框的确认按钮才能实现更改,所以又要重新将已更改的input框的val()重新遍历进另外的一个数组进行存储,再push()进表格就实现更改的更改了

3.实现增的功能

增加的功能也用了模态框来采集数据,所以也用一个数组来存储数据,将已采集的input框val()遍历进数组,创建一个命名为str的dom节点,用数组下标来插入要追加的dom节点,增加的功能就实现了

4.实现查的功能          

首先要获取搜索框里val(), 判断搜索框的长度是否为0,假如是0就弹出“请输入点东西”,再用contains()方法判断搜索框的内容在表格里的有没有,没有就弹出“找不到数据”,再或者搜素框的内容在表格里有就把除了第一行的数据hide(),将表格里有和val()一样的tr show()出来

整个table的增删改查的功能就实现啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/67319.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号