代码之家 › 专栏 › 技术社区 › KristoferA

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

quirks-mode internet-explorer-8 html

2

KristoferA · 技术社区 · 16 年前

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

2 回复 | 直到 16 年前

1

5

brainjam 16 年前

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

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

insertRow() 和 insertCell() createElement() 和 appendChild() “Internet Explorer要求您创建一个tBody元素,并在使用DOM时将其插入表中。因为您直接操作文档树,所以Internet Explorer不会创建tBody,这在使用HTML时会自动暗示。“

表对象模型在我测试过的两种浏览器(Mac上的Chrome和Firefox)中都能工作,因此熟悉它可能不是个坏主意。或者如果您想继续使用DOM方法,请添加 tBody 元素,因为IE需要它。

如果将以下代码添加到 AddTable() 方法,您将看到这两种方法的比较(主要是,第二个表将有一个 t车身 在里面)。它将在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);

希望这有帮助。

2

5

Alohci 16 年前

尝试添加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);