<
form里面的内容总也添加不到table里面，到底哪出问题了呢？
<html>
<head>
<title>删除功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<style type="text/css">
table{
border-collapse: collapse;
}
.container{
border:1px solid #ccc;
padding: 5px;
margin-top: 30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//删除
var aAll=document.getElementsByTagName("a");
for(var item of aAll){
item.onclick=function(){
this.parentNode.parentNode.remove()
}
}
//添加
var add=document.getElementById("add")
add.onclick=function(e){
var realname=document.getElementsByName("realname")[0].value;
var email=document.getElementsByName("email")[0].value;
var salary=document.getElementsByName("salary")[0].value
var str="<tr><td>"+realname+"</td><td>"+email+"</td><td>"+salary+"</td></tr>";
var tbody=document.getElementsByTagName("tbody")[0]
tbody.appendChild(str)
e.preventDefault()
}
}
</script>
</head>
<body>
<table border="1" id="table">
<caption>员工工资表</caption>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>编辑</th>
</tr>
<tr>
<td>Tom</td>
<td>tom@126.com</td>
<td>5000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>Jack</td>
<td>jack@126.com</td>
<td>5000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>David</td>
<td>david@126.com</td>
<td>5000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>Lily</td>
<td>lily@126.com</td>
<td>5000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
<div class="container">
<form>
<div>姓名<input type="text" name="realname"></div>
<div>邮件<input type="email" name="email"></div>
<div>salary<input type="text" name="salary"></div>
<div><button id="add">提交</button></div>
</form>
</div>
</body>
</html>
调试 看报错 搜搜appendChild的用法
--↓↓👍觉得有帮助就点个赞呗～js 追加html 了解下