<!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>
js表单基本操作(增加/删除)
猜你喜欢
转载自blog.csdn.net/weixin_44763595/article/details/104829592
今日推荐
周排行