innerHTML no funciona en el elemento de la fila de la tabla en IE7?

Por favor, consulte este ejemplo: http://jsfiddle.net/lulu2792/a9LZd/

Uso innerHTML para establecer un contenido de fila de tabla (incluido el contenido de la celda), funciono bien en Firefox y Chrome. Sin embargo, tiene un error en IE7 (también en el modo de compatibilidad IE9). El resultado HTML de la tabla es:

 ABC 
Test

Por favor, concéntrate en la segunda fila, tiene un error. No entiendo por qué innerHTML causa este error en IE7. ¿Cómo corregir este problema?

Y también tengo una pregunta: si no uso la etiqueta tbody dentro de un elemento de tabla como este:

 var html = "
Test
";

el navegador aún muestra esta etiqueta.

Por favor, ayúdame a responder 2 preguntas anteriores. Gracias.

No puede usar la propiedad innerHTML para escribir partes de una tabla en IE, debe usar métodos DOM. innerHTML se puede utilizar para escribir una tabla completa o el contenido de una celda.

Hay un ejemplo en MSDN: Creación de tablas de forma dinámica .

También hay un ejemplo en MDN: Uso de la interfaz de tabla DOM

En el código que publicaste en otro lugar (mucho mejor para publicarlo aquí):

 // create table var html = "
Test
"; document.getElementById('div1').innerHTML = html;

Eso funciona bien porque crea una tabla completa.

 // append a row into table var tr = document.createElement('tr'); var td = document.createElement('td'); td.innerHTML = 'ABC'; tr.appendChild(td); var s = tr.innerHTML; 

Lo anterior funciona bien en todos los navegadores.

 tr.innerHTML = s; 

Ooops, solo se puede asignar al innerHTML de una celda (td o th), no a ninguna otra parte de una tabla.

 tr.innerHTML = '' + 'ABC' + ''; 

Lo mismo de nuevo.

 var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 

Puede usar la propiedad tBodies para simplificar eso:

 var tbody = document.getElementById('table1').tBodies[0]; tbody.appendChild(tr); 

Eso funcionaría bien si no te hubieras entrometido con el innerHTML del tr.

Tenga en cuenta que también podría hacer:

 var tbody = document.getElementById('table1').tBodies[0]; var row = tbody.insertRow(-1); var cell = row.insertCell(-1); cell.innerHTML = 'whatever'; 

Y tu estas listo. También puede clonar una fila completa y luego modificar el contenido de la celda con innerHTML.

Internet Explorer tiene problemas notorios al agregar HTML a una tabla. La mejor solución es usar una biblioteca de terceros que normalice el comportamiento en todos los navegadores (como jQuery , pero hay otros).

Ejemplo de jQuery:

 // invokes a function when document is ready // dollar symbol is "jQuery" alias inside function jQuery(function($) { // select the table body and append a new row $('#table1 tbody').append('ABC'); }); 

Oye también, a esa segunda fila le falta la etiqueta

start.

Su segunda pregunta: no se requiere un tbody (creo que XHTML lo requiere si tienes un thead y un tfoot).