本文主要是介绍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动态控制表单表格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!