MSIE8兼容模式不渲染动态创建的表
有点奇怪......如果在 IE8 怪异模式或兼容性视图模式下运行,则以下代码添加的表格不会呈现。谁能告诉我为什么,因为这对我来说并不明显..?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function AddTable()
{
var table = document.createElement('table');
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
cell.innerHTML='abc';
row.appendChild(cell);
var divContainer = document.getElementById('divContainer');
divContainer.appendChild(table);
}
</script>
</head>
<body>
<div id='divContainer'>
</div>
<input type='button' value='add table' onclick='javascript:AddTable()' />
</body>
</html>
A bit weird... ...if running in IE8 quirks mode or in compatibility view mode, the table added by the following code doesn't render. Can anyone tell me why, because it is not obvious to me..?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function AddTable()
{
var table = document.createElement('table');
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
cell.innerHTML='abc';
row.appendChild(cell);
var divContainer = document.getElementById('divContainer');
divContainer.appendChild(table);
}
</script>
</head>
<body>
<div id='divContainer'>
</div>
<input type='button' value='add table' onclick='javascript:AddTable()' />
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
微软有一个页面可以说明正在发生的事情。
http://msdn.microsoft.com/en- us/library/ms532998(VS.85).aspx#TOM_Create
为了动态构建表,他们提倡“表对象模型”,它使用
insertRow()
和insertCell 等方法()
来完成您使用 DOM 方法createElement()
和appendChild()
所做的工作。如果您使用 DOM 方法也可以,但是“Internet Explorer 要求您在使用 DOM 时创建一个 tBody 元素并将其插入表中。由于您直接操作文档树,因此 Internet Explorer 不会创建tBody,使用 HTML 时会自动隐含。”表对象模型可以在我测试过的几个浏览器(Mac 上的 Chrome 和 Firefox)中运行,因此熟悉一下可能不是一个坏主意它。或者,如果您想坚持使用 DOM 方法,请添加 tBody 元素,因为 IE 需要它。
如果将以下代码添加到
AddTable()
方法的末尾,您将看到两者的比较(主要是第二个表中将有一个tBody
) 。并且它会在 IE8 中呈现。希望这有帮助。
Microsoft has a page that may illuminate what's going on.
http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx#TOM_Create
For dynamically building tables they advocate the "Table Object Model", which uses methods like
insertRow()
andinsertCell()
to do the job you're doing with the DOM methodscreateElement()
andappendChild()
. It's also OK if you use the DOM methods, but "Internet Explorer requires that you create a tBody element and insert it into the table when using the DOM. Since you are manipulating the document tree directly, Internet Explorer does not create the tBody, which is automatically implied when using HTML."The table object model works in the couple of browsers I tested it in (Chrome and Firefox on the Mac), so it may not be a bad idea to familiarize yourself with it. Or if you want to stick with the DOM methods, add the
tBody
element, because IE requires it.If you add the following code to the end of your
AddTable()
method you'll see how the two compare (mainly, the second table will have atBody
in it). And it will render in IE8.Hope this helps.
尝试添加 tbody 元素
而不是
do
Try adding a tbody element
Instead of
do