基于JavaScript实现动态添加删除表格的行
2016-02-01 11:27
896 查看
又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。
1.jsp
<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>
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= '<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; //tr while(Row.tagName.toLowerCase()!="tr") { Row=Row.parentNode; } Row.parentNode.removeChild(Row); //删除行 }
以上所述是小编给大家分享的JavaScript实现动态添加删除表格的行,希望对大家有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- IE:添加编辑器
- “百度与站长”更新:关于网站收录,删除,seo等
- C#动态创建button的方法
- 用vbs删除某些类型文件和磁盘空间报告的脚本
- js可突破windows弹退效果代码
- C#动态调整数组大小的方法
- JSP脚本漏洞面面观
- QQ聊天记录删除了怎么恢复简单方法
- Windows2003下批量添加和导出所有ip BAT脚本
- vbs删除注册表项的代码
- 迅速删除非法文件名的批处理代码
- 使用BAT一句话命令实现快速合并JS、CSS
- 通过批处理实现删除运行、查找等处的历史记录的代码
- Shell中删除某些文件外所有文件的3个方法
- js显示当前星期的起止日期的脚本
- 删除文件提示文件正在被另一个人或程序使用的解决方法
- 关于.LDB文件 .ldb文件的产生 .ldb文件的删除方法