JQuery元素操作:插入,删除数据

（文质木木原创）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素操做</title>
		<style type="text/css">
						p{
				text-align: center;
			}
			
			table{
				margin: 0 auto;
				width: 500px;
			}
			table,tr,td{
				border: 1px solid black;
				border-collapse: collapse;	
				text-align: center;		
			}
			
		</style>
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			 * $(html)
			 */
			function addItem(){
				//获取table
				var $tb = $("#tb1");
				//获取表示行的节点
				var $line = $("<tr></tr>");
				//创建存放姓名的单元格
				var $tdName=$("<td></td>");
				//创建表单中的姓名
				var $txtName=$("#username").val();
				$tdName.text($txtName);
				
				//创建存放年龄的单元格
				var $tdAge =$("<td></td>");
				//创建年龄
				var $txtAge=$("#age").val();
				//设置内容
				$tdAge.text($txtAge);
				
				//创建存放电话的单元格
				var $tdTel =$("<td></td>");
				//创建电话
				var $txtTel=$("#tel").val();
				//设置内容
				$tdTel.text($txtTel);
				
				//创建存放删除按钮的单元格
				var $tdDel = $("<td></td>");
				var $btnDel = $("<button>删除</button>");
				$btnDel.prop("type","button");
				//为删除按钮设置单击事件，删除所在行
				$btnDel.click(function(){
				$(this).parent().parent().remove();
				});
				
				//将按钮放入单元格
				$tdDel.append($btnDel);
				
				//在行中追加元素
				$line.append($tdName);
				$line.append($tdAge);
				$line.append($tdTel);
				$line.append($tdDel);
				
				//将行追加到table
				$tb.append($line);
			}
			
			$(function(){
				$("#btnAdd").click(function(){
					addItem();
				})
			});
			
			
			
			
			
		</script>
	</head>
	<body>
		<div id="main">
			<div id="divform">
				<form method="post">
					<p>
						<label >姓名</label>
						<input type="text" id="username" />
					</p>
					<p>
						<label>年龄</label>
						<input type="text" id="age" />
					</p>
					<p>
						<label>电话</label>
						<input type="text" id="tel" />
					</p>
					<p>
					<button type="button" id="btnAdd">添加</button>
					</p>
				</form>
			</div>
			<hr />
			<div id="divtable">
				<table id="tb1">
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>电话</td>
						<td>操作</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>
、
、
喜欢的话请支持原作者，感谢！
JQuery元素操作:插入,删除数据

（文质木木原创）

猜你喜欢
