Kri*_*erA 2 html quirks-mode internet-explorer-8
有点奇怪......如果在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>
尝试添加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);
微软有一个页面可以说明正在发生的事情.
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不会创建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);
希望这可以帮助.
| 归档时间： |
|
| 查看次数： |
2176 次 |
| 最近记录： |