利用Javascript向页面中插入TABLE,IE下无法正常显示
关键字: table, appendchild, ie, firefox
在项目中偶然遇到一个怪异的问题,我要利用javascript动态的向一个DIV中插入一些个TABLE,Firefox可以正常显示,而在IE下,无论版本是6或7,均无法看到这个TABLE。但是,如果我直接把TABLE的HTML代码写在页面上,一切都能正常显示。
最开始出问题的javascript脚本如下:
- var div = document.getElementById("container");
- var table = document.createElement("table");
- div.appendChild(table);
- var tr = document.createElement("tr");
- table.appendChild(tr);
- var td = document.createElement("td");
- tr.appendChild(td);
乍一看,代码比较干净,为什么在IE下就无法显示呢?其实,问题就出在IE的遍历页面中JS构造的DOM元素的时候,是一个按DOM树结构寻址的。如果漏掉了TABLE的TBODY元素,IE是无法显示这个TABLE的,中间加入一个TBODY元素,问题轻松解决!
- var div = document.getElementById("container");
- var table = document.createElement("table");
- div.appendChild(table);
- var body = document.createElement("tbody");
- table.appendChild(body);
- var tr = document.createElement("tr");
- body.appendChild(tr);
- var td = document.createElement("td");
- tr.appendChild(td);