jQuery员工模块制作

最新推荐文章于 2022-07-07 01:33:56 发布

田佳 java

最新推荐文章于 2022-07-07 01:33:56 发布

阅读量830

点赞数

文章标签：练习

本文链接：https://blog.csdn.net/fg89817380/article/details/87864904

版权

在这里插入图片描述

包含添加员工，编辑，保存，替换，删除操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script>
//			function del(obj){//脚本删除方式
//				if(confirm("是否删除？")){
//					//获得obj的父元素的父元素使用移除(td->tr->移除)
//					$(obj).parent().parent().remove();
//				}
//			};
//			$("a").click(function(){
//				if(confirm("是否删除？")){
//					//获得当前元素父元素的父元素使用移除(td->tr->移除)
//					$(this).parent().parent().remove();
//			}
//			});
			
			$(function(){
				$(document).on({
					"mouseover":function(){
						$(this).css("color","deepskyblue");
					},
					"mouseout":function(){$(this).css("color","black");}
				},"th");
				$(document).on("click","a:contains(保存)",function(){
					$(this).text("编辑").parent().parent().children().each(function(index){
						if(index<3){
//							var text = $(this).children().get(0).value;//取得当前文本框的子元素第一个元素DOM对象的value属性
							var text = $(this).children().eq(0).val();
							$(this).empty();
							$(this).text(text);
						}
					});
				});
				
				$(document).on("click","a:contains(编辑)",function(){
					
//					$(this).attr("href","#").text("保存").replaceWith("$(this)");
					$(this).text("保存").parent().parent().children().each(function(index){
						if(index<3){
							var text = $(this).text();
							$(this).empty();
							$("<input type='text'size='3'>").val(text).appendTo($(this));
							
						}/*else if(index==4){
								$(this).empty();
								$("<a>").attr("href","#").text("保存").appendTo($(this));
						}*/
					});
				
				});
				
				//绑定document(网页打开就创建)
				$(document).on("click","a:contains(删除)",function(){
					if(confirm("是否删除？")){
//					//获得当前元素父元素的父元素使用移除(td->tr->移除)
					$(this).parent().parent().remove();
					}
				});
//				$(document).off("mouseout","th");//解除绑定鼠标移开效果
				$(":Submit").click(function(){
					var tr = $("<tr>");
					tr.appendTo("table[value=t2]");
					
					$("<td>").text($("input[name=name]").val()).appendTo(tr);
					$("<td>").text($("input[name=email]").val()).appendTo(tr);
					$("<td>").text($("input[name=salary]").val()).appendTo(tr);
					//动态创建删除方式
					/*var a = $("<a>").attr("href","#").text("删除").click(function(){
						if(confirm("是否删除？")){
						//获得当前元素父元素的父元素使用移除(td->tr->移除)
						$(this).parent().parent().remove();
						}
					});*/
					var a = $("<a>").attr("href","#").text("删除");
					var b = $("<a>").attr("href","#").text("编辑");
					
					$("<td>").append(a).appendTo(tr);
					$("<td>").append(b).appendTo(tr);
//					$("<td><a href='#' onclick='del(this)'>删除</a></td>").appendTo(tr);
					//重置输入框
					$("input[name=name]").val("");
					$("input[name=email]").val("");
					$("input[name=salary]").val("");
				});
				
				
				
			});
			
		</script>
	</head>
	<body>
		<table align="center">
			<tr>
				<th>
					添加新员工
				</th>
			</tr>
			<tr>
				<td>
					name:<input type="text"name="name"/>
					email:<input type="email"name="email"/>
					salary:<input type="text"name="salary"/>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="submit"name="submit" value="Submit"/>
				</td>
			</tr>
		</table>
		<hr size="1"/>
		<table border="1px soild red" align="center" value="t2" width="300" style="text-align: center;">
			<tr value="tt">
				<td>Name</td>
				<td>Email</td>
				<td>Salary</td>
				<td>&nbsp;</td>
			</tr>
			
		</table>
	</body>
</html>