点击删除表格行代码实例
本章节分享一段代码实例，它实现了点击按钮删除表格行代码功能。
此效果还具有查看数据功能，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
table td {
border: 1px solid #CCCCCC;
padding: 5px;
text-align:center;
}
table td span {
margin: 0 5px;
cursor:pointer;
}
.pop {
display: none;
position: absolute;
top: 30%;
left: 50%;
margin-left: -250px;
width: 500px;
background-color: #fff;
z-index: 3;
border: 5px solid #e5e5e5;
padding: 10px;
}
.pop a {
float:right;
text-decoration:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".view").click(function(){
$("<div class='mask'></div>").appendTo($("body"));
$(".mask").css({
"background":"#000",
"opacity":"0.4",
"position":"absolute",
"top":"0",
"left":"0",
"width":"100%",
"height":"100%",
"z-index":"2"
});
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
});
$(".pop").show().children().each(function(index){
$(this).children("span").text(arr[index-1]);
});
})
$(".close").click(function(){
$(this).parent().hide();
$(".mask").remove();
})
$(".del").click(function(){
$(this).parents("tr").remove();
})
})
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职称</td>
<td>工资</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>前端编程</td>
<td>6000</td>
<td><span class="view">查看</span><span class="del">删除</span></td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>c#程序员</td>
<td>5000</td>
<td><span class="view">查看</span><span class="del">删除</span></td>
</tr>
</table>
<div class="pop">
<a href="#" class="close">关闭</a>
<p>姓名：<span></span></p>
<p>年龄：<span></span></p>
<p>职称：<span></span></p>
<p>工资：<span></span></p>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(".view").click(function(){})，为查看按钮注册click事件处理函数。
（3）.$("<div class='mask'></div>").appendTo($("body"))，为body添加一个div元素，也就是半透明的遮罩层。
（4）.$(".mask").css({ "background":"#000",
"opacity":"0.4",
"position":"absolute",
"top":"0",
"left":"0",
"width":"100%",
"height":"100%",
"z-index":"2"
}),设置遮罩层的相关样式。
（5）.var arr=[]，声明一个数组，下面会用到。
（6）.$(this).parent().siblings().each(function(){
arr.push($(this).text());
})，$(this).parent()获取的是查看按钮的父元素，也就是所在的td单元格。
那么$(this).parent().siblings()就是获取的同一行的数据单元格。
通过each遍历每一个单元格，然后将里面的文本存入数组。
（7）.$(".pop").show().children().each(function(index){
$(this).children("span").text(arr[index-1]);
})，将数组中的文本内容写入对应的span元素中。
（8）.$(".close").click(function(){
$(this).parent().hide();
$(".mask").remove();
})，点击关闭按钮，可以隐藏数据层，并且删除遮罩层。
（9）.$(".del").click(function(){
$(this).parents("tr").remove();
})，点击删除当前行。
二.相关阅读:
（1）.appendTo()可以参阅jQuery appendTo()一章节。
（2）.css()可以参阅jQuery css()一章节。
（3）.parent()可以参阅jQuery parent()一章节。
（4）.siblings()可以参阅jQuery siblings()一章节。
（5）.each()可以参阅jQuery each()一章节。
]（6）.children()可以参阅jQuery children()一章节。
（7）.remove()可以参阅jQuery remove()一章节。
点击删除表格行代码实例，这样的场景在实际项目中还是用的比较多的，关于点击删除表格行代码实例就介绍到这了。
点击删除表格行代码实例属于前端实例代码，有关更多实例代码大家可以查看。