Question

有点奇怪......如果在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>

Answer 1

尝试添加tbody元素

而不是

  var row = document.createElement('tr');
  table.appendChild(row);

做

  var tbody = document.createElement('tbody');
  var row = document.createElement('tr');
  tbody.appendChild(row);
  table.appendChild(tbody);

Answer 2

微软有一个页面可以说明正在发生的事情。

http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx#TOM_Create

对于动态构建表，他们提倡“表对象模型”，它使用insertRow()和insertCell()等方法来完成您使用DOM方法createElement()和{ {1}}。如果您使用DOM方法也可以，但“Internet Explorer要求您创建一个tBody元素并在使用DOM时将其插入表中。由于您直接操作文档树，Internet Explorer不会创建tBody，在使用HTML时自动隐含。“

表对象模型适用于我在其中测试过的几个浏览器（Mac上的Chrome和Firefox），因此熟悉它可能不是一个坏主意。或者，如果您想坚持使用DOM方法，请添加appendChild()元素，因为IE需要它。

如果您将以下代码添加到tBody方法的末尾，您将看到两者的比较方式（主要是，第二个表中将包含AddTable()）。它将在IE8中呈现。

tBody

希望这有帮助。

MSIE8兼容模式无法呈现动态创建的表

2 个答案: