尚硅谷：jQuery的员工管理的案例

最新推荐文章于 2020-11-10 19:21:42 发布

piao317110771

最新推荐文章于 2020-11-10 19:21:42 发布

阅读量200

点赞数

分类专栏： jquery 文章标签： jQuery的员工管理的案例

本文链接：https://blog.csdn.net/piao317110771/article/details/84753152

版权

jquery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文通过一个实际案例，展示了如何使用jQuery进行员工管理系统的开发，包括代码实现、原始界面展示及详细步骤讲解。

摘要由CSDN通过智能技术生成

1、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery的员工管理的案例</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
 $(function(){
	 //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
	 //那么这个对象一定是一个 jQuery 对象
	 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
	 //给<a>节点添加点击事件
	 $("#employeetable a").click(function() {
	 	return removeTr(this);
	 });

	 //1.删除<tr>节点
	 function removeTr(aNode) {
	 	var $trNode = $(aNode).parent().parent();
	 	var cont = $trNode.find("td:first").text();
	 	cont = $.trim(cont);
	 	var flag = confirm("您确定要删除"+cont+"的信息吗?");
	 	if(flag) {
	 		$trNode.remove();
	 	}
	 	return false;
	 }

	 //2.添加<tr>节点
	 $("#addEmpButton").click(function() {
	 	$("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
	 				  .append("<td>" + $("#email").val() + "</td>")
	 				  .append("<td>" + $("#salary").val() + "</td>")
	 				  .append("<td><a href='deleteEmp?id=001'>Delete</a></td>")
	 				  .appendTo("#employeetable tbody")
	 				  .find("a")
	 				  .click(function() {
	 				  	return removeTr(this);
	 				  });
	 });

 })
</script>
</head>
<body>
	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
			name="salary" id="salary" /> <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="deleteEmp?id=001">Delete</a></td>
				</tr>
				<tr>
					<td>
						Jerry
					</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>
</body>
</html>

2、原始界面

3、案例

piao317110771

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷：jQuery的员工管理的案例

1、代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="tex
复制链接

扫一扫

专栏目录