JQuery应用案例--自动增加行_jq省市区,增加行-CSDN博客

本文链接：https://blog.csdn.net/rain097790/article/details/11179343

使用JQuery实现自动增加行的功能。如下图，输入文本框内输入用户名和密码，点击增加，上方的表格就生成一行包含刚才输入的用户名和密码，并且还有删除本行的按钮。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
	<center>
		<table id="tableID" border="1" align="center" width="60%">
			<thead>
				<tr>
					<th>用户名</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbodyID">
				<!-- 动态增加行 -->
			</tbody>
		</table>
		<hr />

		用户名：<input type="text" id="usernameID" /> 
		密码： <input type="text" id="passwordID" /> <input type="button" value="增加" id="addID" />
	</center>
</body>
<script type="text/javascript">
	$(function(){
		//将光标定位到用户名文本框
		$("#usernameID").focus();
	});

	$("#addID").click(function() {
		//创建行
		var $tr = $("<tr></tr>");
		//获取文本框中的用户名和密码，并将其添加到行中
		$tr.append($("<th>" + $("#usernameID").val() + "</th>"));
		$tr.append($("<th>" + $("#passwordID").val() + "</th>"));
		//创建删除按钮
		var $del = $("<th><input type='button' value='删除' id='delID'></th>");
		//向行中添加删除按钮
		$tr.append($del);
		//创建删除事件
		$del.click(function() {
			$tr.remove();
		});
		//将创建的行添加到表格中
		$("#tbodyID").append($tr);
		
		//添加完之后将文本框清空
		 $("#usernameID").val("");
		 $("#passwordID").val("");
	});
</script>
</html>