<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
var oTab = document.getElementById("tab1");
var oBtn = document.getElementById("btn1");
var oName = document.getElementById("name");
var oAge = document.getElementById("age");
var aA = document.getElementsByTagName("a");
var id = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function(){
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.innerHTML = id++;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = "<a href='javascript:;'>删除</a>"
oTr.appendChild(oTd);
oTab.getElementsByTagName("a")[0].onclick = function(){
oTab.removeChild(this.parentNode.parentNode);
};
oTab.tBodies[0].appendChild(oTr);
}
}
</script>
<body>
姓名：<input type="text" id="name"/>
年龄： <input type="text" id="age"/>
<input id="btn1" type="button" value="添加"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
