<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
th{
padding: 5px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
}
td{
border: solid 1px;
}
#div1{
margin-left: 200px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<input type="text" name="sex" id="sex">
<input type="button" id="inp-bun" name="but" value="添加">
</div>
<table align="center" border="1px" id="tab">
<caption>学生登记表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<script>
/* document.getElementById("inp-bun").onclick=function () {
var tab= document.getElementsByTagName("table")[0];
var id = document.getElementById("id").value;
var name= document.getElementById("name").value;
var sex= document.getElementById("sex").value;
var tt_id=document.createTextNode(id);
var tt_name=document.createTextNode(name);
var tt_sex=document.createTextNode(sex);
var tr= document.createElement("tr");
var a= document.createElement("a");
var tr_= tab.appendChild(tr);
var td_id= tr_.appendChild(document.createElement("td"));
var td_name= tr_.appendChild(document.createElement("td"));
var td_sex= tr_.appendChild(document.createElement("td"));
var sub=tr_.appendChild(document.createElement("td"));
a.setAttribute("href","JavaScript:void(0);");
a.setAttribute("onclick","delTr(this);");
a.innerHTML="删除";
td_id.appendChild(tt_id);
td_name.appendChild(tt_name);
td_sex.appendChild(tt_sex);
sub.appendChild(a);
};*/
document.getElementById("inp-bun").onclick=function () {
var tab= document.getElementsByTagName("table")[0];
var id = document.getElementById("id").value;
var name= document.getElementById("name").value;
var sex= document.getElementById("sex").value;
tab.innerHTML+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+sex+"</td>\n" +
" <td>"+"<a href='JavaScript:void(0);' onclick='delTr(this)'>删除</a>"+"</td>\n" +
" </tr>"
};
function delTr(obj) {
var table= obj.parentElement.parentElement.parentElement;
var tr=obj.parentElement.parentElement;
table.removeChild(tr);
}
</script>
</body>
</html> |
|
收藏
淘帖
踩
