<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>qdabc.cn</title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-align:center; } #box input{ width:130px; } #box table{ margin:5px 0; background:lawngreen; } </style> <script type="text/javascript"> onload = function(){ var aInput = document.getElementsByTagName('input'); var bTn = document.getElementById('btn'); var table = document.getElementsByTagName('table')[0]; bTn.onclick = function(){ var oTr=document.createElement('tr');//创建节点 创建新的tr table.appendChild(oTr);//将tr添加到table中 var oTd1=document.createElement('td');//创建节点 创建新的td oTd1.innerHTML=aInput[0].value;//给第一个td赋第一个input的内容 oTr.appendChild(oTd1);//将td1添加到tr中 var oTd2=document.createElement('td');//创建节点 创建新的td oTd2.innerHTML=aInput[1].value;//给第二个td赋第二个input的内容 oTr.appendChild(oTd2);//将td2添加到tr中 var oTd3=document.createElement('td') ;//创建节点 创建新的td oTd3.innerHTML=aInput[2].value;//给第三个td赋第三个input的内容 oTr.appendChild(oTd3);//将td3添加到tr中 var oTd4=document.createElement('td') ;//创建节点 创建新的td oTd4.innerHTML='<a href="javascript:;">删除</a>';//给表格赋内容 oTr.appendChild(oTd4);//将td4添加到tr中 oTd4.getElementsByTagName('a')[0].onclick=function(){ table.removeChild(this.parentNode.parentNode); //移除table下面的子节点tr //this.parentNode.parentNode 为触发对象a的父级的父级tr }//删除表格行 } } </script> </head> <body> <div id="box"> ID:<input type="text" name="" id="" value="" /> 姓名:<input type="text" name="" id="" value="" /> 电话:<input type="text" name="" id="" value="" /> <input type="button" name="btn" id="btn" value="保存" style="width:50px;"/> <table border="1" cellspacing="" cellpadding="0" width="600px" > <tr> <td>Id</td> <td>name</td> <td>tal</td> <td>操作</td> </tr> </table> </div> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » js动态表格-添加删除表格