Insertar filas en la tabla

Question

¿Cuál es la mejor forma simple de JavaScript para insertar X filas en una tabla en IE?

La tabla html se ve así:

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

Lo que tengo que hacer es eliminar el cuerpo anterior e insertar uno nuevo con 1000 filas.Tengo mis 1000 filas como una variable de cadena de JavaScript.

El problema es que la tabla en IE no tiene función internalHTML.He visto muchos trucos para hacerlo, pero quiero ver el mejor.

Nota:usar jquery o cualquier otro framework no cuenta.

Answer 1

Aquí hay un gran artículo del tipo que implementó IE innerHTML= en cómo consiguió que IE hiciera tbody.innerHTML="<tr>..." :

  

Al principio, pensé que IE no era   capaz de realizar el redibujo para   tablas modificadas con innerHTML, pero   entonces recordé que estaba   responsable de esta limitación!

Por cierto, el truco que usa es básicamente cómo lo hacen todos los marcos para los elementos table / tbody.

Editar : @mkoryak, tu comentario me dice que no tienes imaginación y no mereces una respuesta. Pero te seguiré haciendo el humor. Tus puntos:

> no está insertando lo que necesito

¿Qué? Está insertando filas (que tiene como una cadena html) en un elemento document.createElement('div').

> también usa un elemento oculto adicional

El objetivo de ese elemento era ilustrar que todo lo que IE necesita es un " context " ;. En su lugar, puede usar un elemento creado sobre la marcha (jQuery.clean()).

> y también el artículo es antiguo

Nunca te volveré a ayudar;)

Pero en serio, si desea ver cómo otros lo han implementado, eche un vistazo a la fuente de jQuery para Element._insertionTranslations , o Prototype's <=> .

Answer 2

Haga lo que hace jQuery, por ejemplo.agregar <table> y </table> a su alrededor, insértelo en el documento y mueva los nodos que desee a donde desee y elimine el elemento temporal.

Answer 3

el código terminó siendo esto:

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

Cosas que deberían existir de antemano: una tabla que tiene un cuerpo con id de 'bodyId'. $ body es una variable global (o la función tiene un cierre), y también hay un poco de jquery, porque IE no evalúa los scripts que se insertan en el html sobre la marcha.

Answer 4

Tuve el mismo problema (al igual que muchas otras personas) y después de mucho jugar, esto es lo que pude trabajar.

Debe hacer un tr a través de document.createelement ('tr') y luego hacer un td, de la misma manera. appendchild the td al tr, appendchild the tr al tbody (no a la tabla) LUEGO puede incorporar el td que creó y funcionará. Esto fue ie8 que estaba usando. Básicamente, la estructura de la tabla debe estar hecha con elementos de creación, pero el resto puede estar interno. Estaba haciendo esto mirando en el depurador IE8 y diría que lo agregaría (si lo hiciera tr.innerhtml = & Quot; blah & Quot;) y no da ningún error, pero no se mostrará, y la vista dom de html mostraba una tabla muy rota (nunca apareció td, pero sí lo hizo / td)

Entonces, cuando finalmente hice el TR AND td mediante llamadas createelement, creó un dom de aspecto correcto y dibujó la página correctamente.