html取消表格输入记录,表格的添加和删除.html

表格的添加和删除

var ID = 5;

window.onload = function(){

var oTab = document.getElementById('tab');

var oInputName = document.getElementById('inputName');

var oInputAge = document.getElementById('inputAge');

var oBut = document.getElementById("but1");

oBut.onclick = function(){

//新建一个行

var oTr = document.createElement('tr');

//添加一个新的单元格到新的行，内容为‘ID’

var oTd1 = document.createElement('td');

oTd1.innerHTML = ++ID;

oTr.appendChild(oTd1);

//添加一个新的单元格到新的行，内容为‘Name’

var oTd2 = document.createElement('td');

oTd2.innerHTML = oInputName.value;

oTr.appendChild(oTd2);

//添加一个新的单元格到新的行，内容为‘Age’

var oTd3 = document.createElement('td');

oTd3.innerHTML = oInputAge.value;

oTr.appendChild(oTd3);

//添加一个新的单元格到新的行，内容为‘操作’

var oTd4 = document.createElement('td');

oTd4.innerHTML = '删除';

oTr.appendChild(oTd4);

//添加新按钮时添加事件

oTd4.getElementsByTagName('button')[0].onclick = function(){

oTab.tBodies[0].removeChild(this.parentNode.parentNode);

}

//将添加了新单元格的新行添加到表格

oTab.tBodies[0].appendChild(oTr);

//添加行后，清空输入框

oInputName.value = '';

oInputAge.value = '';

}

//为表格原有的按钮添加事件

for(var i=0;i

oTab.tBodies[0].getElementsByTagName('button')[i].onclick = function(){

oTab.tBodies[0].removeChild(this.parentNode.parentNode);

}

}

Name:

Age:

IDNameAge操作

1Tom23删除2张三33删除3李四32删除4张伟26删除5王四34删除

一键复制

编辑

Web IDE

原始数据

按行查看

历史