2

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

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

2 回答 2

5

尝试添加一个 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);
于 2010-03-09T09:06:05.620 回答
5

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

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

希望这可以帮助。

于 2010-03-24T05:28:29.983 回答