js、jquery 实现往table中动态添加、删除元素

关注

原创最新推荐文章于 2024-09-15 21:00:00 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

jquery实现添加删除表格 css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box; 阅读详情

js实现方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加元素</title>
		<link rel="stylesheet" href="../css/init.css" />
		<style>
			.container{
				width: 600px;
				margin: 0 auto;
				border: 1px solid #2D93CA;
				text-align: center;
				margin-top: 50px;
				padding: 20px;
			}
			p{
				margin-top: 10px;
			}
			th,td{
				padding: 5px;
			}
			.div1{
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="div1">
				<p>
					<label>姓名</label>
					<input type="text" name="username" id="username" placeholder="请输入姓名"/>
				</p>
				<p>
					<label>密码</label>
					<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>
				</p>
				<p>
					<label>邮箱</label>
					<input type="text" name="email" id="email" placeholder="请输入邮箱"/>
				</p>
				<button onclick="fun1();" style="margin-top: 10px;">添加</button>
			</div>
			<div class="div1">
				<table id="table" border="1" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<th>姓名</th><th>密码</th><th>邮箱</th>
						<th>
							<button>删除</button>
						</th>
					</tr>
				</table>
			</div>
		</div>
		
	</body>
	<script>
		function fun1(){
			//获取各个文本框对象
			var username = document.getElementById("username");
			var pwd = document.getElementById("pwd");
			var email = document.getElementById("email");
			
			//获取输入的值  是  obj.value  获取input里面的value属性值
			var usVal = username.value;
			var pwdVal = pwd.value;
			var emailVal = email.value;

			//获取table对象
			var table = document.getElementById("table");
			//创建tr标签
			var tr = document.createElement("tr");
			//创建td标签
			var td = document.createElement("td");
			//该tr标签的内容  包括子标签和文本内容
			tr.innerHTML = "<td>"+usVal+"</td>"
							+"<td>"+pwdVal+"</td>"
							+"<td>"+emailVal+"</td>"
							+"<td><button onclick='dele(this);'>"+"删除"+"</button></td>";
			table.appendChild(tr);
		}
		function dele(param){
			//获取到button按钮的父级父级元素  tr对象
			var tr = param.parentNode.parentNode;
			//调用 remove()  可以直接删除tr对象  不需要再获取table对象 
			tr.remove();
		}
	</script>
</html>

jquery实现方式

function fun1(){
			//获取input值
			var usVal = $("#username").val();
			var pwdVal = $("#pwd").val();
			var emailVal = $("#email").val();
			//获取table对象
			var table = $("#table");
			//添加元素
			table.append("<tr><td>"+usVal+"</td><td>"+pwdVal+"</td><td>"+emailVal
				+"</td><td><button onclick='dele(this)'>"+
				"删除"+"</button>"+"</td>"+"</tr>"
			);
		}
		function dele(param){
			//获取到button按钮的父级父级元素  tr对象
			var tr = $(param).parent().parent();
			//调用 remove()  可以直接删除tr对象  不需要再获取table对象 
			tr.remove();
		}