首页 > 代码库 > js动态控制表单表格
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动态控制表单表格
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。