问题描述
<html><head><title>动态添加html元素</title><script type="text/javascript"><!----></script><style type="text/css"><!----></style></head><body><form method="get" action="./" id="myForm"></form>问题所属方面：<select name="select" size="1" id=""> <option value="1">问题一</option> <option value="2">问题二</option></select>问题描述1:<textarea name="txt1" rows="3" cols="80"> <input type="button" value="添加一个问题"> <input type="button" value="删除最后一个问题"><input type="Submit" value="保存"></body></html> 我想用javascript动态增加行,当form中没有table标签时是可以增加的,像上面增加了table标签就出现错误了,请问各位该如何解决?
解决方案
由于form.insertBefore是将指定节点添加到form的直接子节点上,由于form中只有一个table,没有afterElement这个直接子节点.所以会报错.input标签的parentNode即p标签,它的直接父结点是TBODY标签.所以只能用TBodyElement.insertBefore.进行插入.把form.insertBefore(label2,afterElement);form.insertBefore(label1,afterElement);两句改为:afterElement.parentNode.insertBefore(label2,afterElement);afterElement.parentNode.insertBefore(label1,afterElement);就可以了.
解决方案二：
tabletbody之类的元素不能直接改变innerHTML故使用insertBefore之类的语句会报错。直接获取table元素操作table的row和cell即可。----------------------------------<html> <head> <title>动态添加html元素</title> <script type="text/javascript"> <!-- var textNumber = 1; function addCheckDetail(){ textNumber++; var x=document.getElementById('myTable'); var oneRow = x.insertRow(); var h1=oneRow.insertCell(0); h1.innerHTML=' <label>问题' + textNumber + '所属方面：'+ ' <select name="select' + textNumber + '" size="1" id=""> '+ ' <option value="1">问题一</option> '+ ' <option value="2">问题二</option> '+ ' </select> '+ ' </label> '+ ' <label>问题描述' + textNumber + ':<textarea name="txt' + textNumber + '" cols="80" rows="3"></textarea></label> '+ ' <p> '; } function removeCheckDetail(){ // 假如有文本框个数超过一个 if (textNumber > 1) { var x=document.getElementById('myTable'); x.deleteRow(x.rows.length - 1); textNumber--; } } //--> </script> <style type="text/css"> <!-- label { display:block; margin:.25em 0em; } --> </style> </head> <body> <form id="myForm" method="get" action="./"> <table id="mytable"><tbody> <tr><td> <label>问题所属方面： <select name="select" size="1" id=""> <option value="1">问题一</option> <option value="2">问题二</option> </select> </label> <label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label> </td></tr></tbody></table> <p> <input type="button" value="添加一个问题" onclick="addCheckDetail()" /> <input type="button" value="删除最后一个问题" onclick="removeCheckDetail()" /> </p> <p><input type="Submit" value="保存" /></p> </form> </body> </html>