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

(文质木木原创)

原文链接


<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 = $("");
				//创建存放姓名的单元格
				var $tdName=$("");
				//创建表单中的姓名
				var $txtName=$("#username").val();
				$tdName.text($txtName);
				
				//创建存放年龄的单元格
				var $tdAge =$("");
				//创建年龄
				var $txtAge=$("#age").val();
				//设置内容
				$tdAge.text($txtAge);
				
				//创建存放电话的单元格
				var $tdTel =$("");
				//创建电话
				var $txtTel=$("#tel").val();
				//设置内容
				$tdTel.text($txtTel);
				
				//创建存放删除按钮的单元格
				var $tdDel = $("");
				var $btnDel = $("");
				$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,前端,jquery)