JavaScript实现动态增删表格的方法

在上方文本框填入"姓名/Email/年龄",实现在下方表格中动态添加或删除单元格

效果：

1.超文本标记语言代码：

bodyp align='center' id='info '姓名：输入类型='text' id='username' Email :输入类型='text' id='email '年龄：输入类型=' text ' id=' age '/pdiv align=' center '输入类型='按钮'值='添加onclick=' addRow()'/div HR table align=' center ' border=' 1 ' id=' testTble ' style=' width : 60%；文本对齐：中心；border:1px实心浅绿色tr td姓名/td tdEmail/td td年龄运输署/运输署操作TD/tr/表2 .Java脚本语言代码：

脚本类型='text/javascript'//三个文本框//一个添加按钮按钮实现功能添加信息到表格中//一个表格，行数动态增加的函数addRow() { //获取投入元素节点数组var inputNodes=文档。getelementsbytagname(' input ')；var str=新字符串（输入码[0]。值);var str1=新字符串（输入码[1]。值);var str2=新字符串（输入码[2]。值);if(((str。长度0)(字符串1。长度0)(字符串2。长度0)){//添加一行插入行()方法用于在表格中的指定位置插入一个新行var newTr=testtble。insert row()；//添加四列sertCell()方法用于在超文本标记语言表的一行的指定位置插入一个空的任务描述元素var新td0=新tr。insert cell()；var新td1=新tr。insert cell()；var新td2=新tr。insert cell()；var新td3=新tr。insert cell()；//分别给每一列赋值new td0 . innertext=input node[0].价值；新td1。innertext=输入节点[1]。价值；新的td2。innertext=输入节点[2]。价值；全新td3。inner html=' input type=' button ' value='删除onclick='删除表(this)'；} else { alert('请先把信息填写完整!');返回；} }函数deleteTable(r) { //获取当前表格行号父节点。父节点。行索引；//调用删除行()删除本行文件。getelementbyid(' testTble ').删除第(一)行；}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。