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

最新推荐文章于 2021-08-30 07:44:58 发布
最新推荐文章于 2021-08-30 07:44:58 发布
阅读量3.2k 收藏 8
点赞数 1
分类专栏： Jquery JavaScript 文章标签： jquery javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqplw/article/details/41580067
版权

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

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

           第一步：我们编写html页             

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查看修改删除</title>
<link rel="stylesheet" type="text/css" href="table.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="table.js"></script>
</head>
<body>
<table id="table">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>职位</th>
		<th>工资</th>
		<th>操作</th>
	</tr>	
    <tr>
		<td>张三</td>
		<td>24</td>
		<td>工程师</td>
		<td>8000</td>
		<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
	 </tr>		 
</table>
<div class="popDiv">
	<p><strong>姓名：</strong><span></span></p>
	<p><strong>年龄：</strong><span></span></p>
	<p><strong>职位：</strong><span></span></p>
	<p><strong>工资：</strong><span></span></p>
	<a href="#" class="close">关闭</a>	
</div>
</body>
</html>
            李四、王五的跟张三类似自行添加
    注：这里引用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代码     

$(document).ready(function () {

			 $('.view').click(function(){
		  
					 //添加遮罩层
					 var maskHeight=$(document).height();
					 var maskWidth=$(document).width();
					 $('<div class="mask"></div>').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,所以得用移除。不是功能正常了就万事无忧了，最重要的是怎样优化使得代码的效率更高。







理想王国
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 46
    评论
专栏目录
jQuery对table表格进行增删改查
01-19
最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！！！ 总结了一下对table的增删改查，写一篇留着以后自己recode。 1.首先我自己写了一个简单的div布局。 2.实现几个用标签做的按钮的功能 分别是新增 修改 删除 查询和返回。 代码如下 html+css（原谅我写在一起吧。。毕竟渲染不是我的强项） <html> <head><title>测试数据</title></head> <style type=text/css> table, td{ font:100% '微软雅黑'; } table{width:80%;border
jQuery实现表格的查看修改删除
macanfa的博客
07-18 2054
表格的查看修改删除
jquery_table_ajax表头增删改查操作
06-30
1，ajax 从php获取数据（模拟数据）； 2，Jquery 操作 Table 的数据，主要是增删改查不显示在每一条数据的后面； 3，对修改操作使用了jquery.cookie.js ，并做了cookie最大值的判断，防止无效（其实不判断最大值也关系不大）； 4，页面需要自己美化； 5，如不在意表格每列最后一行进行删除/编辑操作，请勿下载。
jQuery表格增删改查
OpenSource_的博客
07-29 554
最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！！！ 总结了一下对table的增删改查，写一篇留着以后自己recode。 1.首先我自己写了一个简单的div布局。 2.实现几个用标签做的按钮的功能 分别是新增 修改 删除 查询和返回。 代码如下 html+css(原谅我写在一起吧。。毕竟渲染不是我的强项)测试数据 table, td{ font:100% '微软雅黑...
基于jQuery实现表格的查看修改删除
10-21
本篇将详细介绍如何利用jQuery来实现一个基础的表格功能，包括查看、修改和删除数据。 首先，我们需要创建一个HTML表格，用于展示数据。在示例代码中，我们看到一个包含员工信息的表格，每一行都有“查看”、“修改...
jQuery实现表格的增加、修改、删除、保存代码
12-30
本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能，这些功能是许多Web应用程序的核心部分，特别是在数据管理界面中。 ### 增加 在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其...
jQuery实现用户信息表格的添加和删除功能
10-19
在本文中，我们将深入探讨如何使用jQuery来实现用户信息表格的添加和删除功能。这个功能在许多Web应用程序中都很常见，特别是在数据管理或用户管理的界面中。通过使用jQuery，我们可以简化JavaScript代码，使得交互...
jQuery表格内容修改删除特效代码
03-20
**jQuery表格内容修改删除特效代码详解** 在网页开发中，数据展示往往需要用到表格，而能够交互式的表格，如允许用户编辑和删除数据的表格，能极大地提升用户体验。本篇文章将详细解析"jQuery表格内容修改删除特效...
使用Jquery实现如图表格的增删改查操作
A_KING2的博客
05-20 1406
使用Jquery实现如图表格的增删改查操作 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="删除全部" id="dqb"/><br /&g
jquery.cookie实现json添加、查询、删除
12-31
用jquery实现在cookie中添加、查询、删除json值，简洁实用，附有jquery.cookie.js/jquery.jsoncookie.js/json2.js等jquery库，及示例代码
js表格table的增删改
09-01
js 对表格的动态操作，动态添加，删除，修改
JQuery对表格行的添加删除
03-20
JQuery对表格行的添加删除,如添加一行，删除一行
JQuery 实现表格的增删查和光棒效果
01-09
JQuery 实现表格的增删查和光棒效果 Jquery添加一行，可以查询，可以选中一行删除 还有选中光棒效果哟
datatable的例子使用--增加删除修改查询
07-16
datatable的一个简单实用，可以参照http://blog.csdn.net/u011563903 一篇博客的介绍
jQuery表格的增删改查
m0_57202083的博客
08-30 573
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
jquery实现表格的即时编辑（增，删，改，查）
得意小门生的博客
08-15 715
演示地址：https://wow.techbrood.com/fiddle/54101?vm=full
jquery 操作table 实现 增删改查
qq_27569663的博客
08-17 387
jquery 操作table 实现 增删改查 方式一：每一行设置id 方法二 我推荐： 通过 $(this).parent().parent() 直接找到tr 希望我这里说的能给你一些启示。
JQuery 实例：表格列表数据 增删改查 窗口(隐藏层)
houyanhua1的专栏
12-18 3265
#bgDiv { position: absolute; left: 0px; top: 0px; background-color: black; opacity: 0.2; /*设置不透明度，即可以看到层下面的内容，但是由于层的遮挡，背景是不可以进行操作的*/
JQuery实现网页表格动态增加与删除内容
最新发布
05-25
要使用jQuery实现网页表格动态增加与删除内容，需要先在HTML中创建一个表格，并给它添加一些行和列。然后，可以使用jQuery的方法来添加和删除行或者列。 下面是一个简单的例子： HTML代码： ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>john@example.com</td> <td><button class="deleteRow">Delete</button></td> </tr> <tr> <td>Jane</td> <td>30</td> <td>jane@example.com</td> <td><button class="deleteRow">Delete</button></td> </tr> </tbody> </table> <button id="addRow">Add Row</button> <button id="addColumn">Add Column</button> ``` 在这个表格中，我们有一个表头和两行数据。每行有三列数据和一个删除按钮。 现在我们可以使用jQuery来为这个表格添加一些功能： ```javascript $(document).ready(function() { // 添加行 $('#addRow').click(function() { $('#myTable tbody').append('<tr><td>New Name</td><td>New Age</td><td>New Email</td><td><button class="deleteRow">Delete</button></td></tr>'); }); // 删除行 $('#myTable').on('click', '.deleteRow', function() { $(this).closest('tr').remove(); }); // 添加列 $('#addColumn').click(function() { $('#myTable thead tr').append('<th>New Column</th>'); $('#myTable tbody tr').each(function() { $(this).append('<td>New Data</td>'); }); }); }); ``` 在这个代码中，我们使用了jQuery的`append()`方法来添加新的行或列。我们还使用了`closest()`方法来找到要删除的行，并使用`remove()`方法来将其从表格中删除。 现在，当我们点击“Add Row”按钮时，将会在表格的最后一行添加一个新的行。当我们点击“Delete”按钮时，将会删除这一行。当我们点击“Add Column”按钮时，将会在表头和每一行的最后一列添加一个新的列。 这是一个简单的例子，你可以根据你的实际需求来修改代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 46
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值