JS小功能（操作桌子动态添加删除表格及数据)实现代码

效果

代码：复制代码代码如下： head runat=' server ' title/title style type=' text/CSS ' tr { height : 30px；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var Oname=document。getelementbyid(' txt 1 ')；var oEasyName=文档。getelementbyid(' txt 2 ')；var Ohero=文档。GetElementByID(' txt 3 ')；var oBtn=文档。getelementbyid(' BTN ')；var oTab=文档。getelementbyid(' tab 1 ')；var num=otab。tbodies[0]。行。长度1；奥宾。onclick=function(){ var OTr=document。创建元素(' tr ')；var OTd=文档。创建元素(' TD ')OTd。innerHTMl=numOTR。append child(OTd)；var OTd=文档。create element(' TD ')；otd。innerhtml=OnAme。价值；OTR。append child(OTd)；var OTd=文档。create element(' TD ')；otd。innerhtml=oeasyname。价值；OTR。append child(OTd)；var OTd=文档。create element(' TD ')；otd。innerhtml=Ohero。价值；OTR。append child(OTd)；var OTd=文档。create element(' TD ')；oTd.innerHTML='a href='# '删除/a '；OTR。append child(OTd)；otd。getelementsbytagname(' a ')[0].onclick=function(){ otab。tbodies[0].移除子(这个。父节点。父节点)；} oTab.tBodies[0].追加子对象(OTr)；} };/script/head body div style=' margin-left : 300 px；边距-top : 30px；种族名称：输入类型='text' id='txt1' /种族简称：输入类型='text' id='txt2' /英雄：输入类型='text' id='txt3' /输入类型='button' id='btn' value='添加信息//div表id='tab1 '边框='1 '样式='text-align:居中；宽度： 800像素；左边距左侧： 300像素边距-top : 10px；TD tr style='背景色： #FF0000' td序号运输署/运输署种族名称运输署/运输署种族简称运输署/运输署英雄运输署/运输署操作td /tr /thead tbody tr td 1 /td人类联盟运输署代表性英雄：AM/TD/TD/tr/TD/2/TD兽人部落TD/TD/ORC/TD/TD代表性英雄：BM/TD/TD/tr TD/3 TD/TD不死亡灵UD/道明代表性英雄：DK/TD/TD/tr TD/4/TD暗夜精灵TD/TD-NE/TD代表性英雄：DH/TD/TD/tr/t车身/表体/车身