Режим совместимости MSIE8 не отображает динамически созданную таблицу - PullRequest
Новая
       10

Режим совместимости MSIE8 не отображает динамически созданную таблицу

2 голосов
/ 09 марта 2010

Немного странно ... ... при работе в режиме причуд 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>

Ответы [ 2 ]

5 голосов
/ 24 марта 2010

У Microsoft есть страница, которая может освещать происходящее.

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. "

Объектная модель таблицы работает в нескольких браузерах, в которых я ее тестировал (Chrome и Firefox на Mac), поэтому знакомство с ней может быть неплохой. Или, если вы хотите придерживаться методов 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);

Надеюсь, это поможет.

5 голосов
/ 09 марта 2010

Попробуйте добавить элемент 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);
...