jquery实现动态表格

最新推荐文章于 2024-09-25 15:18:17 发布

原创最新推荐文章于 2024-09-25 15:18:17 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动态表格

前端技术专栏收录该内容

41 篇文章

订阅专栏

<!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>添加用户！！！</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	window.onload=function(){
		/**
		 * 清除文本框的内容
		 */
		function clear(){
			$("#username").attr("value","");
			$("#age").attr("value","");
			$("#email").attr("value","");
		}
		
		$("#addItem").click(function(){
			//获得输入的值
			var $username = $("#username").val();
			var $age = $("#age").val();
			var $email = $("#email").val();
			//获取table，并添加记录
			var $table = $("#userInfo");
			//创建节点
			var tr = $("<tr/>");
			var td1 = $("<td/>");
			var td2 = $("<td></td>");
			var td3 = $("<td/>");
			var td4 = $("<td/>");
			td1.text($username);
			td2.text($age);
			td3.text($email);
			var $a = $("<a/>");
			//用户名也可以这样获取
			//username = $a.parent().parent().children().eq(0).text();
			$a.attr("href","adServlet?username="+$username);
			$a.text("删除");
			//为a添加一个事件
			$a.click(function(){
				var flag = confirm("您确定删除【"+$username+"】这条记录吗？？");
				if(flag){
					//自己删除自己
					tr.remove();
				}
				return false;
			});
			td4.append($a);
			//添加td到tr
			tr.append(td1);
			tr.append(td2);
			tr.append(td3);
			tr.append(td4);
			//直接加到table中，tbody都省了
			//如果要获取tbody,  $table.children().eq(0)得到tbody节点
			$table.append(tr);
			//添加完之后删除输入信息
			clear();
		});
	}
</script>
</head>
<body>
	<center>
		<h1>添加用户</h1>
		请输入姓名：<input type="text" id="username" /><br/>
		请输入年龄：<input type="text" id="age" /><br/>
		请输入邮箱：<input type="text" id="email" /><br/><br/>
		<input type="button" value="提交" id="addItem"/>
		
		<table border=1px width=800px id="userInfo">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>邮箱</td>
				<td>操作</td>
			</tr>
			
		</table>
	</center>
</body>
</html>