ID | 用户名 | 密码 | 操作 |
---|---|---|---|
1001 | 张三 | 123asd | 更新 删除 上移 下移 |
1002 | 李四 | 456zxc | 更新 删除 上移 下移 |
//删除当前行
//用事件委托实现,否则点击一次后会失效
$(‘table’).on(‘click’,’#del’,function(){
(
t
h
i
s
)
.
p
a
r
e
n
t
s
(
′
t
r
′
)
.
r
e
m
o
v
e
(
)
;
/
/
(this).parents('tr').remove(); //
(this).parents(′tr′).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 = /1+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
t
r
=
tr=
tr=(’’)
//遍历获取input中的内容依次填到td中
//第一个参数是索引,第二个参数是数据对象
//如果是json格式的话,第一个参数是键,第二个是值
$(‘form input’).each(function(index,domEle){
//添加td节点
var
t
d
=
td=
td=(’’);
//将内容循环添加到创建好的td中
t
d
.
a
p
p
e
n
d
(
td.append(
td.append((domEle).val());
//将td添加到创建的tr中
t
d
.
a
p
p
e
n
d
T
o
(
td.appendTo(
td.appendTo(tr);
});
//创建td的删除更新按钮
var
t
d
=
td=
td=("更新 删除 上移 下移 ");
t
d
.
a
p
p
e
n
d
T
o
(
td.appendTo(
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
t
r
=
tr=
tr=(‘tr’).eq(z+1)
$tr.css(‘background-color’,’#2D93CA’);
//淡入淡出的一个动画
$tr.fadeOut().fadeIn();
//prepend() 在被选元素的开头插入指定的内容
(
′
t
a
b
l
e
′
)
.
p
r
e
p
e
n
d
(
('table').prepend(
(′table′).prepend(tr);
}
else{
alert(‘不存在该用户,请确认您输入的ID是否正确’)
}
})
//上移操作
$(‘table’).on(‘click’,’.up’,function(){
//.parents(‘tr’) 找到父亲为tr的节点
var
t
r
=
tr=
tr=(this).parents(‘tr’);
console.log(
t
r
)
;
/
/
判
断
当
前
行
是
否
是
第
一
行
i
f
(
tr); //判断当前行是否是第一行 if(
tr);//判断当前行是否是第一行if(tr.index()!=0){
$tr.fadeOut().fadeIn();
//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素
//before() 在被选元素的前面插入指定的内容
t
r
.
p
r
e
v
(
)
.
b
e
f
o
r
e
(
tr.prev().before(
tr.prev().before(tr);
}
})
//下移操作
KaTeX parse error: Expected '}', got 'EOF' at end of input: … var length1=(‘tr’).length;
var
t
r
=
tr=
tr=(this).parents(‘tr’);
console.log(length1);
//如果当前行是最后一行,则不再往下移
if($tr.index()!=length1-1){
$tr.fadeOut().fadeIn();
//next() 获得匹配元素集合中每个元素紧邻的后一个同胞元素
//after() 在被选元素的后面插入指定的内容
t
r
.
n
e
x
t
(
)
.
a
f
t
e
r
(
tr.next().after(
tr.next().after(tr);
}
})
作者:磊磊磊磊磊子啊
来源:CSDN
原文:https://blog.csdn.net/zsl_955200/article/details/53689009
版权声明:本文为博主原创文章,转载请附上博文链接!
\u0391-\uFFE5 ↩︎