MSIE8兼容模式不渲染动态创建的表

发布于 2024-08-24 13:43:28 字数 705 浏览 11 评论 0原文

有点奇怪......如果在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

柠檬色的秋千 2024-08-31 13:43:28

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

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

希望这有帮助。

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() and insertCell() to do the job you're doing with the DOM methodscreateElement() and appendChild(). 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 a tBody in it). And it will render in 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);

Hope this helps.

如歌彻婉言 2024-08-31 13:43:28

尝试添加 tbody 元素

而不是

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

do

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

Try adding a tbody element

Instead of

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

do

  var tbody = document.createElement('tbody');
  var row = document.createElement('tr');
  tbody.appendChild(row);
  table.appendChild(tbody);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文