点击删除表格行代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击按钮删除表格行代码功能。

此效果还具有查看数据功能,代码实例如下:

<!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()一章节。

点击删除表格行代码实例,这样的场景在实际项目中还是用的比较多的,关于点击删除表格行代码实例就介绍到这了。

点击删除表格行代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容