jQuery实现增删改查
本文实例为大家分享了jQuery实现增删改查的具体代码,供大家参考,具体内容如下
- jquery用的是1.11版本
- css就用bootstrap吧
- 因为增和改用了模态框修改,所以还用了bootstrap.js实现模态框的弹出和关闭
做了个简单的表格来实现功能
HTML代码段
//表格
本文实例为大家分享了jQuery实现增删改查的具体代码,供大家参考,具体内容如下
做了个简单的表格来实现功能
HTML代码段
//表格
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()一样的trshow()出来
整个table的增删改查的功能就实现啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。