js动态控制表单表格
Posted xiao_style
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动态控制表单表格相关的知识，希望对你有一定的参考价值。
js动态控制表单表格，这里操作只讲，添加一行，删除一行，删除某一行某一列。
直接放代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="tabl" border=1 cellpadding=10 cellspacing=0> <thead bgcolor="#00B3FF"> <tr> <td>姓名</td> <td>联系方式</td> </tr> </thead> <tbody> <tr> <td>孟小伟</td> <td>686898</td> </tr> <tr> <td>静妹妹</td> <td>686898</td> </tr> <tr> <td>臭猪 </td> <td>686898</td> </tr> </tbody> </table> <!--表单基础特别举例--> <form>
<!--这里有个有趣的东西，for=“cao” ,然后后面的<input />添加id为cao，你点击这里的文字，会在input直接提示你输入--> <p><label for="cao">名字是什么，点击我就可以到框框里面：</label><input type="text" id="cao" /></p> </form> <script> window.onload = function() { /*创建一行，执行chuang()函数*/ chuang(); /*删除一行，或者某一行一列,执行dete函数*/ dete(); function chuang() { var tab = document.getElementById("tabl");/*取到要操作的对象*/ var tr = tab.insertRow(2);/*给其添加序号为2的行*/ var Ptext = new Array();/*创建文本节点组数*/ Ptext[0] = document.createTextNode("黑猪"); Ptext[1] = document.createTextNode("998342"); for(var i = 0; i < Ptext.length; i++) {/*遍历*/ var cd = tr.insertCell(i);/*按序号创建列*/ cd.appendChild(Ptext[i]);/*把文本节点添加到对应的列*/ } } function dete(){ var tab = document.getElementById("tabl"); tab.deleteRow(4);/*删除一行*/ tab.rows[3].deleteCell(1);/*删除某一行某一列*/ } } </script> </body> </html>
以上是关于js动态控制表单表格的主要内容，如果未能解决你的问题，请参考以下文章