js表单基本操作(增加/删除)

<!DOCTYPE html>
<html>
<head>
	<title></title>
<script type="text/javascript">
	window.onload=function(){
    var Sub=document.getElementById('sub');
    var Name = document.getElementById('username');
    var Age= document.getElementById('userage');
   	var Tab = document.getElementById('tab');
    var id = Tab.tBodies[0].rows.length+1;
    Sub.onclick=function(){
   
    var x = document.createElement('tr');
   
   
   

    var x1 = document.createElement('td');

    x1.innerHTML=id++;
    x.appendChild(x1);

    var x1 = document.createElement('td');
    x1.innerHTML=Name.value;
    x.appendChild(x1);
   // Tab.insertBefore(x1,td1[0]);
    var x1=document.createElement('td');
    x1.innerHTML=Age.value;
    x.appendChild(x1);

    // Tab.insertBefore(x2,td1[0]);
    var x1 = document.createElement('td');
    x1.innerHTML='<a href="javascript:;">删除</a>'
    x.appendChild(x1);

    x1.getElementsByTagName('a')[0].onclick=function(){
     Tab.tBodies[0].removeChild(this.parentNode.parentNode);
    };

    Tab.tBodies[0].appendChild(x);
	};
};
</script>
</head>
<body>
名字:<input type="text" id="username"><br/>
年龄:<input type="text" id="userage"><br/>
<input type="button" value="提交" id="sub">
<br/><br/><br/><br/><br/>
<table border="2" id="tab" width="500px;" style="text-align: center;">
	<thead>
	<tr>
	  <th>编号</th>
	  <th>名字</th>
	  <th>年龄</th>
	  <th>操作</th>
	</tr>
</thead > 
<tbody id="ta">
   <tr>
	  <td>1</td>
	  <td>ls</td>
	  <td>22</td>
	  <td><a href="javascript:;">删除</a></td>
	</tr>
</tbody>
</table>
</body>
</html>

在这里插入图片描述

发布了62 篇原创文章 · 获赞 102 · 访问量 3153

猜你喜欢

转载自blog.csdn.net/weixin_44763595/article/details/104829592
今日推荐