JQuery操作实现增删改查的详细介绍

添加用户 查找用户

ID	用户名	密码	操作
1001	张三	123asd	更新 删除 上移 下移
1002	李四	456zxc	更新 删除 上移 下移

ID:(只能是数字)

用户名：(只能是汉字)

密码：(英文+数字或下划线，长度不小于6)

提交 更新 取消

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 下面这是鸡块代码，不得不说，注释很详细 1

//删除当前行
//用事件委托实现，否则点击一次后会失效
$(‘table’).on(‘click’,’#del’,function(){
$(this).parents{(}^{\prime }t{r}^{\prime }).remove();//$(this).parent().parent().remove(); 同上
//parent() parents()的区别就是前者获取的只有它的上一级元素
//后者把它的所有上级元素都获取了，不过可以明确指定获取哪一级
});

//初始化
function init(){
$(‘input’).val(’’);
};

//显示隐藏的表单框
function addUser(){
init();
//show()里面的参数是动画执行的时间，可有可无，也可加一个回调函数,hide()同理
$(’#addUser’).show(1000);
$(’#btn-add’).show();
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btn-update').hi…(’#uid’).val());
};

$(’#cancel’).click(function(){
$(’#addUser’).hide(1000);
init();
});

//提交验证
//定义一个全局变量，判断操作是否成功
var result=false;
$(’#btn-add’).click(function(){
msg();
if(result){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲addUser').hide(…(’#uid’).val();
var val2=KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲user').val(); …(’#pwd’).val();
//正则验证
var reg_user = /¹+KaTeX parse error: Expected 'EOF', got '\w' at position 27: … reg_pwd = /^((\̲w̲*\d\w*[a-z]\w*)…/i;
if(val1==’’){
result=false;
alert(‘请输入ID’)
}else if(val2==’’){
result=false;
alert(‘请输入用户名’)
}else if(val3==’’){
result=false;
alert(‘请输入密码’)
}else if(!reg_user.test(val2)){
result=false;
alert(‘用户名格式不正确’)
}else if(!reg_pwd.test(val3)){
result=false;
alert(‘密码格式不正确’)
}else{
result=true;
};
if(result){
push();
};
}
//把信息添加到相应表格内
function push(){
//创建tr节点
var $tr=$(’’)
//遍历获取input中的内容依次填到td中
//第一个参数是索引，第二个参数是数据对象
//如果是json格式的话，第一个参数是键，第二个是值
$(‘form input’).each(function(index,domEle){
//添加td节点
var $td=$(’’);
//将内容循环添加到创建好的td中
$td.append($(domEle).val());
//将td添加到创建的tr中
$td.appendTo($tr);
});
//创建td的删除更新按钮
var $td=$("更新 删除 上移 下移 ");
$td.appendTo($tr);
//最后将创建的tr插入到table中的最后一个位置
$tr.appendTo(‘table’);
}

//更新操作
//定义全局变量，用于存放要修改的行号
var row=0
$(‘table’).on(‘click’,’#up’,function(){
$(’#addUser’).show(1000);
$(’#btn-add’).hide();
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btn-update').sh…(this).parent().prevAll();
var arr=[];
//通过循环将所有td里面的文本放到数组里面
for(var i=0;i<val.length;i++){
arr[arr.length]=val.eq(i).text();
};
//得到的arr数组与表格顺序相反
//将arr数组逆序与表格顺序相同，以便依次填到input中
var arr1=arr.reverse();
for(var j=0;j<$(‘form input’).length;j++){
KaTeX parse error: Expected 'EOF', got '}' at position 39: …l(arr1[j]) }̲; //i是该行所在的…(‘table’).find(“tr”).index(val.parent()[0]);
console.log(i);
row=i;
});

//更新验证
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btn-update').on…(this));
msg();
$(’#addUser’).hide(1000);
//过滤器 过滤索引，过滤出行号为row的tr，并移除
$(‘tr’).filter(function(index){
return index==row
}).remove();
});

//查找操作
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲findUser').on('…(’#findInp’).val();
console.log(val);
var arr=[];
//通过循环将第一列td的值存入到数组中
for(var i=0;i<KaTeX parse error: Expected '}', got 'EOF' at end of input: …rr[arr.length]=(“tr”).find(“td:first”).eq(i).text();
};
//通过循环判断input中输入的值，在表格中是否存在
for(var j=0;j<arr.length;j++){
if(arr[j]==val){
result=true
//记录其所在的行号
var z=j;
}
};
//置顶操作
//如果存在的话，就将该行置顶
if(result){
console.log(z);
// $(‘tr:nth-child(’+z+1+’)’).css(‘background-color’,’#2D93CA’);同下两行
var $tr=$(‘tr’).eq(z+1)
$tr.css(‘background-color’,’#2D93CA’);
//淡入淡出的一个动画
$tr.fadeOut().fadeIn();
//prepend() 在被选元素的开头插入指定的内容
${(}^{\prime }tabl{e}^{\prime }).prepend($tr);
}
else{
alert(‘不存在该用户，请确认您输入的ID是否正确’)
}
})

//上移操作
$(‘table’).on(‘click’,’.up’,function(){
//.parents(‘tr’) 找到父亲为tr的节点
var $tr=$(this).parents(‘tr’);
console.log($tr);//判断当前行是否是第一行if($tr.index()!=0){
$tr.fadeOut().fadeIn();
//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素
//before() 在被选元素的前面插入指定的内容
$tr.prev().before($tr);
}
})

//下移操作
KaTeX parse error: Expected '}', got 'EOF' at end of input: … var length1=(‘tr’).length;
var $tr=$(this).parents(‘tr’);
console.log(length1);
//如果当前行是最后一行，则不再往下移
if($tr.index()!=length1-1){
$tr.fadeOut().fadeIn();
//next() 获得匹配元素集合中每个元素紧邻的后一个同胞元素
//after() 在被选元素的后面插入指定的内容
$tr.next().after($tr);
}
})

作者：磊磊磊磊磊子啊
来源：CSDN
原文：https://blog.csdn.net/zsl_955200/article/details/53689009
版权声明：本文为博主原创文章，转载请附上博文链接！

---

1. \u0391-\uFFE5 ↩︎