jq php mysql增删改查_jQuery实现增删改查

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

jquery用的是1.11版本

css就用bootstrap吧

因为增和改用了模态框修改，所以还用了bootstrap.js实现模态框的弹出和关闭

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

HTML代码段

//表格

搜索

增加

编号	姓名	成绩	操作
1	张三	89	修改 删除
2	李四	91	修改 删除
3	刘一	80	修改 删除

//修改的模态框

×

修改信息

关闭

提交更改

//增加的模态框

×

增加信息

关闭

增加信息

Jquery代码段

//删除的功能

$(document).on("click", ".del", function() {

$(this).parents("tr").remove()

})

//改的功能

var _this = null

$(document).on("click", ".rev", function() {

var _arr = []

_this = $(this).parents("tr")

$(this).parents("tr").find("td:not(:last)").each(function(){

_arr.push($(this).text())

})

$("#myModal").find("input").each(function(i){

$(this).val(_arr[i])

})

})

$(document).on("click",".olk", function(){

var _arr = []

$("#myModal").find("input").each(function(){

_arr.push($(this).val())

})

_this.find("td:not(:last)").each(function(i){

$(this).text(_arr[i])

})

})

//增加的功能

$(document).on("click",".aad",function(){

var _arr = []

var str = ""

$("#myModel").find("input").each(function(){

_arr.push($(this).val())

})

str = '

'+_arr[0]+''+_arr[1]+''+_arr[2]+'修改 删除'

$(".table").append(str)

})

//查的功能

$(".sreach").click(function(){

var oS = $(".swich").val()

if(oS.length==0){

alert("请输入点东西")

}else if($("table tr td:contains('"+oS+"')").length==0){

alert("找不到数据")

}else{

$(".table tr:not(:first)").hide()

$(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)

}

})

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的增删改查的功能就实现啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。