Jquery实现表格中的查看删除修改

页面导航:首页 > 网络编程 > JavaScript > Jquery实现表格中的查看删除修改

Jquery实现表格中的查看删除修改

来源: 作者: 时间:2016-02-05 11:06 【

首先我们在学习js的时候就有接触到表 26684;中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多。 现在就用学到的Jquery来做一个表

首先我们在学习js的时候就有接触到表格中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多。

现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大。

第一步:我们编写html页





查看修改删除

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="table.js"></script>


姓名 年龄 职位 工资 操作
张三 24 工程师 8000

姓名:

年龄:

职位:

工资:

李四、王五的跟张三类似自行添加
注:这里引用Jquery时用的是Jquery 1.10.2版本 用的不是本地文件而是百度的CDN。

第二步:编写样式

#table{
	border:1px solid #abcdef;
	border-collapse:collapse;
	width:600px;
}
tr{height:30px;}
th {
	border:1px solid #abcdef;	
}
td{		
	border:1px solid #abcdef;
	text-align:center;
}
td a{
     margin-right:5px ;
	color:#f00;
}
.popDiv{
	width:500px;
	padding:10px;
	border:1px solid red;
	position:absolute;
	left:50%;
	top:100px;
	background:#fff;
	display:none;
	z-index:4;
}
.popDiv p{
	border-bottom:1px solid red;
}

最后效果如图:

\

最后:编写的js代码

<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHByZSBjbGFzcz0="brush:java;">$(document).ready(function () { $('.view').click(function(){ //添加遮罩层 var maskHeight=$(document).height(); var maskWidth=$(document).width(); $('

').appendTo($('body')); $('div.mask').css({ 'opacity':0.4, 'background':'#000', 'position':'absolute', 'left':0, 'top':0, 'height':maskHeight, 'width':maskWidth, 'z-index':2 }); //获取表格中的数据 var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()); }); $('.popDiv').show().children().each(function(i){ $(this).children('span').text(arr[i]); }); //关闭 $('.close').click(function(){ $(this).parent().hide(); $('.mask').remove();//注意这里不能用hide,因为会不断生成mask }); }); //删除 $('.del').click(function(){ $(this).parents('tr').remove(); }); });

当点击查看时:

点击关闭遮罩消失,点击删除即可删除。修改这里就不放代码了,有兴趣的可以自己动手写写。相信用js写过显示和遮罩这个功能的用Jquery就体会到了它的强大。

总结:在写移除遮罩的时候想当然的也跟点击关闭的时候用.hide但是在火狐调试器下面观察到了每当点击一次查看然后关闭,遮罩层虽然是消失了但是DOM树下每次都会多产生一个div,所以得用移除。不是功能正常了就万事无忧了,最重要的是怎样优化使得代码的效率更高。







Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<