MSIE8兼容模式不呈现动态创建的表格 [英] MSIE8 compatibility mode not rendering dynamically created table
问题描述
< html xmlns =http：// www.w3.org/1999/xhtml\">
< head>
< script>
函数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>
微软有一个页面可以说明发生了什么。
http://msdn.microsoft.com/en-us/library/ms532998（VS.85）.aspx＃TOM_Create
对于动态他们提倡使用表格对象模型来建立表格，它使用像 insertRow（）和 insertCell（）您正在使用DOM方法 createElement（）和 appendChild（）执行的工作。如果您使用DOM方法，也是可以的，但是Internet Explorer要求您创建一个tBody元素并在使用DOM时将其插入到表中。由于您直接操作文档树，因此Internet Explorer不会创建
表格对象模型适用于我测试过的两个浏览器（Chrome和Firefox上的Mac），所以熟悉它可能不是一个坏主意。或者如果您想坚持使用DOM方法，请添加 tBody 元素，因为IE需要它。
如果你将以下代码添加到 AddTable（）方法的末尾，您将看到两者如何比较（主要是第二个表的 tBody 在里面）。它将在IE8中呈现。
//现在表格对象模型方式
table = document.createElement（'表'）;
row = table.insertRow（-1）;
cell = row.insertCell（-1）;
cell.innerHTML ='def';
divContainer.appendChild（table）;
希望这有助于您。
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>
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.
这篇关于MSIE8兼容模式不呈现动态创建的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
