效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' # box { margin 33600 auto；背景：黄色；border:4px双# 808080宽度宽度：600像素文本对齐：居中；} #输入框{ width :130 px } # box table { margin 33605 px 0；background : lawingreen }/style脚本类型=' text/JavaScript ' on load=function(){ var aInput=document。getelementsbytagname(' input ')；var BtN=文档。GetElementByID(' BtN ')；var表=文档。getelementsbytagname(' table ')[0]；////方法一//BtN。onclick=function(){////var OTr=document。创建元素(' tr ')；//创建节点//表格。append child(OTr)；//创建桌子的子节点tr//var OTd=文档。create element(' TD ')；//创建节点//oTd.innerHTML=aInput[0].价值；//给表格赋内容//OTr。追加子级(OtD)；//创建tr的子节点TD////var OTd=文档。创建元素(' TD ')；//创建节点//oTd.innerHTML=aInput[1].价值；//给表格赋内容//OTr。追加子级(OtD)；//创建tr的子节点TD////var OTd=文档。创建元素(' TD ')；//创建节点//oTd.innerHTML=aInput[2].价值；//给表格赋内容//OTr。追加子级(OtD)；//创建tr的子节点TD//var OTd=文档。create element(' TD ')；//创建节点//OTd。InnerHTMl=' a href=' JAVAScript :rel='外部nofollow' rel='外部' nofollow '删除/a '；//给表格赋内容//OTr。追加子级(OtD)；//创建tr的子节点TD//OTd。GetElementsBytagname(' a ')[0].onclick=function(){//table。移除子(这个。父节点。父节点)；////移除桌子下面的子节点tr//}//删除表格行//方法二BTN。onclick=function(){ var OTr=document。创建元素(' tr ')；//创建节点桌子。append child(OTr)；//创建桌子的子节点tr为(var I=0；我想。长度-1；I){ var OTd=document。创建元素(' TD ')；//创建节点oTd.innerHTML=aInput[i].价值；//给表格赋内容OTR。append child(OTd)；//创建tr的子节点TD } var OTd=文档。create element(' TD ')；//创建节点otd。innerHTMl=' a href=' JAVAScript :rel='外部nofollow' rel='外部' nofollow '删除/a '；//给表格赋内容OTR。append child(OTd)；//创建tr的子节点TD OTd。GetElementsBytagname(' a ')[0].onclick=function(){ table。delete row(1)；} } }/script/head body div id=' box ' id : InPut type=' text ' name=' id=' value=' '/姓名：输入类型=' text ' name=' id=' value=' '/电话：输入类型=' text ' name=' id=' value=' '/输入类型=' button ' name=' BTN ' id=' BTN ' value='保存style=' width :50 px '/table border='单元格间距='单元格填充=' width=' 600 px ' tr TDid/TD TDname/TD TDtal/TD TD操作/td /tr /table /div /body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！