<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
width: 300px;
height: 500px;
border: 1px solid;
margin: 20px auto;
padding-left: 66px;
padding-top: 15px;
}
</style>
</head>
<body>
姓名：<input type="text" name="" id="" value=""><br />
班级：<input type="text" name="" id="grade" value=""/><br />
姓别：<input type="radio" value="男" name="sex"/>男<input type="radio" value="女" name="sex" />女<br />
年龄：<input type="text" required="" name="" id="age" value=""/><br />
<button id="btn1" >增加</button>
<hr />
<table border="1px" >
<tr>
<td>姓名</td>
<td>班级</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn1").onclick=function(){
var Z1=document.getElementsByTagName("input")[0].value;
var Z2=document.getElementsByTagName("input")[1].value;
var Z3=document.getElementsByTagName("input")[2].value;
var Z4=document.getElementsByTagName("input")[4].value;
// 追加tr
var mytd=document.getElementsByTagName("table")[0];
var addtr=document.createElement("tr");
var a=mytd.appendChild(addtr);
// 追加td
var addtd=document.createElement("td");
var name1=a.appendChild(addtd);
name1.innerHTML=Z1;
// 班级
var addtd=document.createElement("td");
var grade1=a.appendChild(addtd);
grade1.innerHTML=Z2;
// 性别
var addtd=document.createElement("td");
var sex1=a.appendChild(addtd);
sex1.innerHTML=Z3;
// 年龄
var addtd=document.createElement("td");
var age1=a.appendChild(addtd);
age1.innerHTML=Z4;
// 删除
var addtd=document.createElement("td");
var del=a.appendChild(addtd);
del.innerHTML='删除';
// 获取值
del.onclick=function(){
name1.remove();
grade1.remove();
sex1.remove();
age1.remove();
del.remove();
}
}
}
</script>
</body>
</html>
|