用面向对象的思想做一个有增删表格的页面，主要使用的知识是DOM，涉及到的对象有Document、ElementNode、TextNode， 涉及到的方法有appendChild和removeChild，对表格样式也做了修改。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<title>表格增删</title>
<style>
*{
font-size: 15px;
text-align: center;
}
table{
border: black solid 1px;
margin: 10% auto auto auto;
border-spacing: 0px;
}
input{
height: 30px;
padding-left: 5px;
text-align: left;
}
td{
border: black solid 1px;
padding: 0px;
height: 30px;
}
</style>
</head>
<body>
<table >
<tr>
<td><input type="text" id="id" placeholder="输入id"> </td>
<td><input type="text" id="name" placeholder="输入姓名"> </td>
<td><input type="text" id="gender" placeholder="输入性别"> </td>
<td><input type="button" id="add" value="添加"> </td>
</tr>
</table>
<table>
<tr>
<td width="80">id</td>
<td width="150px">name</td>
<td width="80px">gender</td>
<td width="80px"> 删除</td>
</tr>
<tr>
<td>01</td>
<td>新恒结衣</td>
<td>女</td>
<td> <a href="javascript:void(0);" > 删除 </a> </td>
</tr>
<tr>
<td>02</td>
<td>朴宝英</td>
<td>女</td>
<td> <a href="javascript:void(0);" >删除 </a> </td>
</tr>
</table>
<script>
function add() {
var id = document.getElementById("id").value;
var ele_id = document.createTextNode(id);
var name = document.getElementById("name").value;
var ele_name = document.createTextNode(name);
var gender = document.getElementById("gender").value;
var ele_gender = document.createTextNode(gender);
var ele_anchor = document.createElement("a");
ele_anchor.href = "javascript:void(0)";
ele_anchor.onclick= function () {
del(ele_anchor)
};
var text = document.createTextNode("增删");
ele_anchor.appendChild(text);
var ele_tr = document.createElement("tr");
var td01 = document.createElement("td");
var td02 = document.createElement("td");
var td03 = document.createElement("td");
var td04 = document.createElement("td");
td01.appendChild(ele_id);
td02.appendChild(ele_name);
td03.appendChild(ele_gender);
td04.appendChild(ele_anchor);
ele_tr.appendChild(td01);
ele_tr.appendChild(td02);
ele_tr.appendChild(td03);
ele_tr.appendChild(td04);
var ele_table = document.getElementsByTagName("table")[1];
ele_table.appendChild(ele_tr);
}
document.getElementById("add").onclick = add;
function del(obj) {
var ele_tr = obj.parentElement.parentElement;
var ele_table = obj.parentElement.parentElement.parentElement;
ele_table.removeChild(ele_tr);
}
</script>
</body>
</html>
| 
收藏
淘帖
踩
