js 动态增加、删除表格
代码:
<html> <head> <title>js动态增加、删除表格</title> </head> <body> <form method="post" action=""> <input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();"> <table border="1" style="width:75%;border:1px;"> <thead> <tr bgcolor="#c8b4cd"> <td align="center"> 序号 </td> <td align="center"> 姓名 </td> <td align="center"> 性别 </td> <td align="center"> 爱好 </td> <td align="center"> 籍贯 </td> <td align="center"> 操作 </td> </tr> </thead> <tbody id="mybody"> <!----动态表格内容-----> </tbody> </table> </form> </body> </html> <script type="text/javascript"> //全局变量 var i=0; //添加行 function addMyRow(){ var mytable = document.getElementById("mybody"); var mytr = mytable.insertRow(); //插入行 //插入行单元格的值 mytr.insertCell(0).innerHTML = i+1; mytr.insertCell(1).innerHTML="<input type='hidden' name='"+i+"'/><input type='text' name='myname"+i+"'/>"; mytr.insertCell(2).innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女"; mytr.insertCell(3).innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳"; mytr.insertCell(4).innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>"; mytr.insertCell(5).innerHTML="<input type='button' value='删除' onclick='delMyRow(this);'/>"; i++; } //删除当前行 function delMyRow(r){ var i=r.parentNode.parentNode.rowIndex; //当前行 var mytable = document.getElementById('mybody'); //获取table对象 mytable.deleteRow(i-1); } //删除所有行 function delAllMyRow(){ var mytable = document.getElementById("mybody"); var rowlen=mytable.rows.length; for(var i=rowlen-1;i>=0;i--){ mytable.deleteRow(i); } } </script>
相关推荐
JS动态增加删除表格行 有两种方式,一种是增加表格行,另一种是通过增加DIV内的数据实现。
js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行
js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例
纯javascript增加删除表格行,新增,删除行
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
几种经典的jQuery动态增加删除表格的实例,还有一种传统javascript控制的表格增加删除的实例,这是总结了网络上比较好的几个版本提炼出来的。
vue.js动态表格增加删除修改代码是一款带日期显示,支持删除和重新编辑表格内容效果代码。
javascript实现动态增加删除表格行(兼容IE FF).docx
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
javascript动态增加、删除、填充表格内容 unction numberCells() { var count=0; for (i=0; i ; i++) { for (j=0; j (i).cells.length; j++) { document.all.mytable.rows(i).cells(j)....
原生js可编辑表格实现动态添加表格行数和删除表格行数
js _ 动态表格 js 动态表格增 删 查 改
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
js操作html表格, 增加,删除js操作html表格, 增加,删除
使用javascript实现table动态增加删除行列。
web端js动态增加删除表格行,双击打开即可看效果
自动增加删除表格行代码(纯JS)自动增加删除表格行代码(纯JS)自动增加删除表格行代码(纯JS)
动态增加删除行简单例子 博文链接:https://ben-sin.iteye.com/blog/180440
javascript实现动态增加删除表格行(兼容IE/FF)