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();
}