java表格可以添加删除滴代码_JS小功能(操作Table--动态添加删除表格及数据)实现代码...

tr

{

height: 30px;

}

window.onload = function () {

var oName = document.getElementById('txt1');

var oEasyName = document.getElementById('txt2');

var oHero = document.getElementById('txt3');

var oBtn = document.getElementById('btn');

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

var num = oTab.tBodies[0].rows.length + 1;

oBtn.onclick = function () {

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

var oTd = document.createElement('td')

oTd.innerHTML = num++;

oTr.appendChild(oTd);

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

oTd.innerHTML = oName.value;

oTr.appendChild(oTd);

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

oTd.innerHTML = oEasyName.value;

oTr.appendChild(oTd);

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

oTd.innerHTML = oHero.value;

oTr.appendChild(oTd);

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

oTd.innerHTML = '删除';

oTr.appendChild(oTd);

oTd.getElementsByTagName('a')[0].onclick = function () {

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

}

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

}

};

种族名称：

种族简称：

英雄 ：        

序号

种族名称

种族简称

英雄

操作

1

人类联盟

HUM

代表性英雄：AM

2

兽人部落

ORC

代表性英雄：BM

3

不死亡灵

UD

代表性英雄：DK

4

暗夜精灵

NE

代表性英雄：DH