为什么动态创建的文本框在Firefox下不能传值？

昨天关于Firefox和IE的兼容性谈了点自己的体会，不过既然现实是这样，那就研究一下吧。昨天晚上又遇到了Firefox和IE的问题。
开始我想动态创建一个文本框，然后提交数据，最简单的方法当然是

1. <table>
2. <formaction="test.php">
3. <tr><td>
4. <divid="div1"></div>
5. <inputtype="submit"value="Submit"/>
6. <inputtype="button"value="Add"onclick="add();"/>
7. </td></tr>
8. </form>
9. </table>
10. <scripttype="text/javascript">
11. functionadd()
12. {
13. document.getElementById("div1").innerHTML=document.getElementById("div1").innerHTML+
14. "<span><br/><inputtype=textname=option[]/>"+
15. "<inputtype=buttonvalue=Deleteonclick=/"Delete(this);/"/></span>";
16. }
17. functionDelete(obj)
18. {
19. obj.parentNode.innerHTML="";
20. }
21. </script>

以上是样例，在IE下工作得非常正常，但是在Firefox下就出现了很多问题。我把它列出来，供大家参考，以免以后遇到类似的问题

1. 第13行这种写法，会造成在Firefox下不能保存用户输入的数据。也就是说，如果用户输入了内容，点Add追加下一行的时候，用户输入的数据会被清空。
2. 于是我把代码改成这样

1. <scripttype="text/javascript">
2. functionadd()
3. {
4. try{
5. varobj=document.getElementById("div1");
6. varnode=document.createElement("span");
7. node.appendChild(document.createElement("br"));
9. vartext=document.createElement("input");
10. text.name="option[]";
11. text.type="text";
12. node.appendChild(text);
14. vardnode=document.createElement("input");
15. dnode.name="option[]";
16. dnode.value="Delete";
17. dnode.type="button";
18. dnode.onclick=function(evt){Delete(this);};
19. node.appendChild(dnode);
21. obj.appendChild(node);
22. }catch(e)
23. {
24. alert(e);
25. }
26. }

这次能在Firefox和IE下正常工作了，但是问题又来了，在Firefox里点击提交之后，发现新创建的文本框内容没有出现在$_POST里。而IE下是正常的。这次肯定不是javascript的问题了，到底什么地方出问题了，百思不得其解，最后只能求助google.功夫不负有心人，终于在一个论坛上看到了答案，就是<form></form>标签不能嵌入<table><></table>中，这是不规范的写法，造成了数据不能正常传递。关于标记是否规范的检查，有个很好的网站可以验证 http://validator.w3.org经常做WEB开发的不妨验证一下网页的规范。

最后贴上在Firefox和IE下能正常工作的代码

1. <formaction="test.php">
2. <table>
3. <tr><td>
4. <divid="div1"></div>
5. <inputtype="submit"value="Submit"/>
6. <inputtype="button"value="Add"onclick="add();"/>
7. </td></tr>
8. </table>
9. </form>
10. <scripttype="text/javascript">
11. functionadd()
12. {
13. try{
14. varobj=document.getElementById("div1");
15. varnode=document.createElement("span");
16. node.appendChild(document.createElement("br"));
18. vartext=document.createElement("input");
19. text.name="option[]";
20. text.type="text";
21. node.appendChild(text);
23. vardnode=document.createElement("input");
24. dnode.name="option[]";
25. dnode.value="Delete";
26. dnode.type="button";
27. dnode.onclick=function(evt){Delete(this);};
28. node.appendChild(dnode);
30. obj.appendChild(node);
31. }catch(e)
32. {
33. alert(e);
34. }
35. }
36. functionDelete(obj)
37. {
38. obj.parentNode.innerHTML="";
39. }
40. </script>