长期以来,我一直以为form表单是放数据的,table、tr、td是负责HTML页面显示布局的,他们之间不会互相影响。但是今天出现了这样的一个问题。同样的代码使用jQuery的serialize方法在IE8和IE9上执行是可以获取到form表单数据的,而在IE11上就不行。
经过多次试验、比较、测试发现是因为form标签和table交叉的原因。比如在以下的情况是执行失败的:
<table>
<form>
<tr>
<td>姓名</td>
<td><input name="name" type="text"/></td>
</tr>
</form>
</table>
而以下的方式是成功的:
<form>
<table>
<tr>
<td>姓名</td>
<td><input name="name" type="text"/></td>
</tr>
</table>
</form>
在网上也查了下资料,但是貌似没有讲的非常清晰的。但是可以肯定的是这是因为各个版本和类型的浏览器对HTML文档解析的规则是不同的,比如IE浏览器版本越高其HTML格式要求越严格。在以上情景中form和table实际上是一个层次的标签,而第一种方式似乎使用form割裂了table的完整性,当然了这也是我自己瞎分析的。这里写出来防止大家再犯同样的错误,这种错误有时候会让人莫名其妙,如果不知道这个岔,解决起来也会浪费时间。