html - MSIE8 兼容模式不呈现动态创建的表

标签 html internet-explorer-8 quirks-mode

有点奇怪... ...如果在 IE8 怪癖模式或兼容 View 模式下运行,则以下代码添加的表格不会呈现。谁能告诉我为什么,因为这对我来说并不明显..?

<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>

最佳答案

Microsoft 有一个页面可以阐明正在发生的事情。

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 中呈现。

 // now the Table Object Model way
  table = document.createElement('table');
  row = table.insertRow(-1) ;
  cell = row.insertCell(-1) ;
  cell.innerHTML='def';
  divContainer.appendChild(table);

希望这对您有所帮助。

关于html - MSIE8 兼容模式不呈现动态创建的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2406706/

相关文章:

javascript - Jquery 动画宽度 Accordion 样式横幅

css - 在 IE8 中应用 css 渐变过滤器时表格单元格丢失边框

html - 在 Firefox 中设置 <select> 的颜色不起作用

CSS 背景图片无法在 IE9 中加载

ruby - 在 ruby​​ 中扩展/修补库的 DRYest 方法是什么?

html - 当父级以 Quirks 模式呈现时,iframe 内容能否以标准模式呈现?

html - 右对齐子 div 而不扩展具有动态宽度的父级

jquery - 获取 <video> 的原始尺寸

jquery - 简单的下拉div

css - 背景不透明度适用于 ie7 和 ie9,但不适用于 ie8