又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，需要的朋友参考下
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。
1.jsp
| 产品名称 | 编号 | 数量 | 重量 | 操作 |
|---|---|---|---|---|
2.js
//添加行 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= ''; }else if(i==1){ tab.rows[rownum].cells[i].innerHTML=''; }else if(i==2){ tab.rows[rownum].cells[i].innerHTML=''; }else{ tab.rows[rownum].cells[i].innerHTML=''; } } tab.rows[rownum].insertCell(i); tab.rows[rownum].cells[i].innerHTML='删除行'; } //删除行 function delRow(obj) { var Row=obj.parentNode; var Row=obj.parentNode; //tr while(Row.tagName.toLowerCase()!="tr") { Row=Row.parentNode; } Row.parentNode.removeChild(Row); //删除行 }以上所述是小编给大家分享的JavaScript实现动态添加删除表格的行，希望对大家有所帮助。
以上就是基于JavaScript实现动态添加删除表格的行的详细内容，更多请关注0133技术站其它相关文章！
