<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onclick = function(){
var oTab = document.getElementById("tab1");
var aTr = oTab.tBodies[0].rows;
var oBtn = document.getElementById("btn1");
var iD = aTr.length + 1;
// alert(iD);
oBtn.onclick = function(){
var oName = document.getElementById("name");
var oAge = document.getElementById("age");
var oT = document.createElement("tr");
var Td1 = document.createElement("td");
Td1.innerHTML = iD++;
oT.appendChild(Td1);
var Td2 = document.createElement("td");
Td2.innerHTML = oName.value;
oT.appendChild(Td2);
var Td3 = document.createElement("td");
Td3.innerHTML = age.value;
oT.appendChild(Td3);
var Td4 = document.createElement("td");
Td4.innerHTML = '<a href = "javascript:;">删除</a>';
oT.appendChild(Td4);
oTab.tBodies[0].appendChild(oT);
}
var aA = document.getElementsByTagName("a");
for(var i = 0; i < aA.length; i++){
aA[i].onclick = function (){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
</head>
<body>
姓名：<input id = "name" type="text"/>
年龄：<input id = "age" type = "text"/>
<input id = "btn1" type = "button" value = "添加行"/>
<table border="1px" width="500px" id = "tab1">
<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>36</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李斯</td>
<td>47</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
