收藏
回答

form表单中的内容为什么添加不到table里面呢?

<

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>
回答关注问题邀请回答
收藏

2 个回答

  • 正周
    正周
    01-14

    调试 看报错 搜搜appendChild的用法

    --↓↓👍觉得有帮助就点个赞呗~
    
    01-14
    赞同 1
    回复
  • จุ๊บ
    จุ๊บ
    01-14

    js 追加html 了解下

    01-14
    赞同
    回复 2
    • 立志大灰郎
      立志大灰郎
      01-14
      这样做的性能不好,会整个替换tbody中的内容,我用appendChild该怎样写呢?
      01-14
      回复
    • จุ๊บ
      จุ๊บ
      01-14回复立志大灰郎
      动态创建tr和td,最后将创建的tr添加到table里面
      01-14
      回复
登录 后发表内容
问题标签