姓名:
年龄:
ID |
Name |
Age |
操作 |
1 |
John |
19 |
|
2 |
Alic |
20 |
|
3 |
Mark |
21 |
|
var oTab = document.getElementById('tab');
var oBtn = document.getElementById('btn');
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var id = oTab.tBodies[0].rows.length+1;
oBtn.onclick=function()
{
//首先要添加一个 tr
var oTr = document.createElement('tr');
// 接下来创建三个td
var oTd_1=document.createElement('td');
//oTd13_3_1.innerHTML=oTab13_3.tBodies[0].rows.length+1;//直接行数+1,但是如果删除之后再添加,行数就会乱套
oTd_1.innerHTML=id++; // 所以通过天剑一个变量来控制,这样添加的id就会自动增加,虽然删除之后,这个id就不再出现,但符合情况
oTr.appendChild(oTd_1);
var oTd_2=document.createElement('td');
oTd_2.innerHTML=oName.value;
oTr.appendChild(oTd_2);
var oTd_3=document.createElement('td');
oTd_3.innerHTML=oAge.value;
oTr.appendChild(oTd_3);
// 最后一个td 里面用来放删除按钮
var oTd_4=document.createElement('td');
oTd_4.innerHTML='Delete';
oTr.appendChild(oTd_4);
oTd_4.getElementsByTagName('a')[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode); //this 是 , 父级是td, td的父级是tr
};
oTab.tBodies[0].appendChild(oTr);
}