基于JavaScript实现动态添加删除表格的行

<table id="viewTabs"><thead><tr><th>产品名称</th><th>编号</th><th>数量</th><th>重量</th><th>操作</th></tr></thead><tbody><tr><td><input name="productName" type="text"></td><td><input name="productNumber" type="text"></td><td><input name="quantity" type="text"></td><td><input name="weight" type="text"></td><td></td></tr></tbody></table><button type="button" onclick="addTable();" style="margin-left: 750px;">添加行</button>

//添加行function addTable(){var tab=document.getElementById("viewTabs"); //获得表格var colsNum=tab.rows.item(0).cells.length; //表格的列数//表格当前的行数 var num=document.getElementById("viewTabs").rows.length;var rownum=num;tab.insertRow(rownum);for(var i=0;i<4; i++){tab.rows[rownum].insertCell(i);//插入列if(i==0){tab.rows[rownum].cells[i].innerHTML='<input name="productName" type="text"/>';}else if(i==1){tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>';}else if(i==2){tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>';}else{tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>';}}tab.rows[rownum].insertCell(i);tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">删除行</a>';}//删除行function delRow(obj){var Row=obj.parentNode;var Row=obj.parentNode; //trwhile(Row.tagName.toLowerCase()!="tr"){Row=Row.parentNode;}Row.parentNode.removeChild(Row); //删除行}