浏览 6504 次
锁定老帖子 主题:JS动态添加删除表格
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-12-09
<script type="text/javascript"> //全局变量 var i=0; //添加行 function addMyRow(){ var mytable = document.getElementById("mybody"); var mytr = mytable.insertRow(); mytr.setAttribute("id","tr"+i); var mytd_1=mytr.insertCell(); var mytd_2=mytr.insertCell(); var mytd_3=mytr.insertCell(); var mytd_4=mytr.insertCell(); var mytd_5=mytr.insertCell(); mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>"; mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女"; mytd_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'/>游泳"; mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>"; mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>"; i++; } //删除当前行 function delMyRow(j){ var mytable = document.getElementById("mybody"); var myrow = document.getElementById("tr"+j); mytable.deleteRow(myrow.rowIndex-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> <input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();"> <table border="1"> <thead> <tr bgcolor="red"> <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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-03-24
我已收藏您的博文。谢谢。对我有帮助
|
|
返回顶楼 | |
发表时间:2009-03-26
用这么多的interHTML,将来程序的调试是个很大的问题.
我吃过这个亏,劝你别这么干 |
|
返回顶楼 | |