您的位置：首页 > 其它

删除一行

2017-06-28 21:56 99 查看
英语专八转前端，在家学习ing。

如果想点击按钮删除当前行呢？

建议仍然使用事件代理；

$("tbody")[0].onclick=function(e){
if(e.target.nodeName.toLowerCase()=="input"){
for(var i=0,iLength=inputs.length,num=0;i<iLength;i++){
if(inputs[i].checked==false){
num--;
selAll.checked=false;
}
if(inputs[i].checked==true){
num++;
if(num==(inputs.length-1)){
selAll.checked=true
}
}

}
};
//点击删除按钮删除一行
if(e.target.nodeName.toLowerCase()=="button"){
this.removeChild(e.target.parentNode.parentNode);
}
}


但回想一下，一般删除都会有个确认的操作。这里可以使用window自带的confirm来实现。

if(e.target.nodeName.toLowerCase()=="button"){
if(confirm("您确定要删除这一行吗？")){
this.removeChild(e.target.parentNode.parentNode);
}
}


这里能够看到e.target.nodeName.toLowerCase()用了两次，每次使用时，都需判断一次，所以最好还是用一个变量接住比较好。

略作更改如下：

$("tbody")[0].onclick=function(e){
var etarget=e.target;
var targetName=etarget.nodeName;
var targetNameLower=targetName.toLowerCase();
if(targetNameLower=="input"){
for(var i=0,iLength=inputs.length,num=0;i<iLength;i++){
if(inputs[i].checked==false){
num--;
selAll.checked=false;
}
if(inputs[i].checked==true){
num++;
if(num==(inputs.length-1)){
selAll.checked=true
}
}

}
};
if(targetNameLower=="button"){
if(confirm("您确定要删除这一行吗？")){
this.removeChild(etarget.parentNode.parentNode);
}
}
}


当然，window自带的弹窗实在让人不敢恭维，所以可以css布局一个模态框，点击弹出。下一节将简单写一下。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  dom操作 删除行 window弹窗 事件代理 性能优化
相关文章推荐
新的分享
章节导航