使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接（源码）

最新推荐文章于 2023-07-07 18:00:27 发布

猴麦麦

最新推荐文章于 2023-07-07 18:00:27 发布

阅读量1.9k

点赞数 4

本文链接：https://blog.csdn.net/Houoy/article/details/106742694

版权

使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接

JavaScript/JQuery完成对表格的增删改查和动态拼接

- 使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接

1、语言环境和需求

开发环境：Visual Studio Code /Visual Studio2019
需求说明：现有员工信息表，添加JavaScript/JQuery脚本完成员工信息的增删改查。页面如下图
在这里插入图片描述

2、编写表结构，编写表结构，引入jquery和javascript文件

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/new_file.js" type="text/javascript"></script>
	</head>
	<body>
		<a href="#">增加</a>&nbsp;&nbsp;
		<input type="text"/><a href="#">查询</a>
		</p>
		<table border="1" id="table">
            <tr>
            	<th>ID</th>
            	<th>姓名</th>
            	<th>薪水</th>
            	<th>功能</th>
            </tr>
            <tr>
            	<td>1</td>
            	<td>张三</td>
            	<td>8000</td>
            	<td>
            		<a href="#" class="bc" style="display: none;">保存</a>
            		<a href="#" class="xg">修改</a>&nbsp;
            		<a href="#" class="sc">删除</a>
            	</td>
            </tr>
            <tr>
            	<td>2</td>
            	<td>李四</td>
            	<td>9000</td>
            	<td>
            		<a href="#" class="bc" style="display: none;">保存</a>
            		<a href="#" class="xg">修改</a>&nbsp;
            		<a href="#" class="sc">删除</a>
            	</td>
            	
            </tr>
	</table>
</body>
</html>

3、实现“增加”功能，复制表格第一行数据，添加到表格最后一行

在这里插入图片描述

$(function(){
		//增加
		$("a:contains('增加')").click(function(){
			var first=$("#table tr:eq(1)");
			var news=first.clone(true);
			news.appendTo(first.parent());
		});
});

4、实现“删除”功能，删除员工

$(function(){
	//删除
	$("a.sc").click(function(){
		$(this).parent().parent().remove(); 
	});
});

5、实现“查询”功能，查询员工ID，显示满足条件的员工信息

在这里插入图片描述

$(function(){
	//查询
 		$("a:contains('查询')").click(function(){
 			var keys=$("input").val();
 			var trr=$("table tr:gt(0)");
 			if(keys!=""){
 				for(var i=0;i<trr.length;i++){
 					var id=trr.eq(i).find("td:first").html();
 					if(id==keys){
 						trr.eq(i).show();
 					}
 					else{
 						trr.eq(i).hide();
 					}
 				}
 			}
 			else{
 				for(var i=0;i<trr.length;i++){
 					trr.eq(i).show();
 				}
 			}
 		})
});

6、实现“修改”功能，根据员工ID，点击保存修改员工姓名和薪水。

在这里插入图片描述

$(function(){
		//查询
   		$("a:contains('查询')").click(function(){
   			var keys=$("input").val();
   			var trr=$("table tr:gt(0)");
   			if(keys!=""){
   				for(var i=0;i<trr.length;i++){
   					var id=trr.eq(i).find("td:first").html();
   					if(id==keys){
   						trr.eq(i).show();
   					}
   					else{
   						trr.eq(i).hide();
   					}
   				}
   			}
   			else{
   				for(var i=0;i<trr.length;i++){
   					trr.eq(i).show();
   				}
   			}
   		})
	
	//修改
	$(".xg").click(function(){
		var tds=$(this).parent().parent().children();
		for(var i=0;i<tds.length;i++)
		{
			var td=tds.eq(i);
			if (td.children().length<=0) {
				var html="<input type='text' value='"+td.text()+"'/>";
				td.html(html);
				}
				
			}
			$(".bc").show();
			$(".xg").hide();
		});
		
		//保存
		$(".bc").click(function(){
			var tr=$(this).parent().parent();
			var inputs=tr.find("input[type='text']");
			for (var i=0;i<inputs.length;i++) {
				var input=inputs.eq(i);
				input.parent().text(input.val());
				input.remove();
				
			}
			$(".bc").hide();
			$(".xg").show();
	
		});
});

到此就结束啦，快去练习一下吧！欢迎大佬和小Monkey沟通。
在这里插入图片描述

感谢大佬指正小Monkey
如果你觉得有用的话，就留个赞吧！蟹蟹

猴麦麦

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接（源码）

使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接JavaScript/JQuery完成对表格的增删改查和动态拼接使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接1、语言环境和需求2、编写表结构，编写表结构，引入jquery和javascript文件3、实现“增加”功能，复制表格第一行数据，添加到表格最后一行4、实现“删除”功能，删除员工5、实现“查询”功能，查询员工ID，显示满足条件的员工信息6、实现“修改”功能，根据员工ID，点击保存修
复制链接

扫一扫