Inserir linhas na tabela

Question

O que é a melhor maneira javascript planície de inserir linhas X em uma tabela no IE.

Os olhares tabela HTML como este:

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

O que eu preciso fazer, é deixar cair o corpo de idade, e inserir um novo com 1000 linhas. Eu tenho minhas 1000 linhas como uma variável seqüência de javascript.

O problema é que a tabela no IE não tem nenhuma função innerHTML. Eu vi um monte de hacks para fazer isso, mas eu quero ver o seu melhor.

Nota: usando jQuery ou qualquer outra estrutura não conta.

Answer 1

Aqui está um ótimo artigo pelo cara que implementou innerHTML= do IE em como ele chegou IE para fazer tbody.innerHTML="<tr>..." :

No início, eu pensei que o IE não era capaz de realizar o redesenho para tabelas modificadas com innerHTML, mas então me lembrei que eu era responsável por esta limitação!

Aliás o truque que ele usa é, basicamente, como todos os quadros fazer isso por elementos table / tbody.

Editar : @mkoryak, o seu comentário me diz que você tem de zero a imaginação e não merecem uma resposta. Mas eu vou humor você de qualquer maneira. Seus pontos:

> ele não está inserindo o que eu preciso

Wha? Ele é inserir linhas (que tem como uma string html) em um elemento table.

> ele também usa um elemento extra escondida

O ponto desse elemento foi ilustrar que todas as necessidades do IE é um "contexto". Você pode usar um elemento criado na mosca vez (document.createElement('div')).

> e também o artigo é velho

Eu nunca estou ajudando você de novo;)

Mas, falando sério, se você quiser ver como os outros implementaram-lo, dê uma olhada na fonte jQuery para jQuery.clean() , ou de Prototype Element._insertionTranslations .

Answer 2

Do como jQuery faz, por exemplo. adicionar <table> e </table> em torno dele, inserir no documento e mover os nós que deseja onde quiser e vala a temp-elemento.

Answer 3

O código acabou sendo esta:

    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);
    }

Coisas que Beed de existir de antemão: uma tabela que tem um corpo com id 'bodyId'. $ Corpo é uma variável global (ou a função tem um fechamento nele), e há um pouco de jQuery lá também, porque o IE faz scripts não evalute que são inseridos no HTML na mosca.

Answer 4

Eu tive o mesmo problema (como fazem muitas outras pessoas) e depois de muito brincar aqui está o que eu tenho para o trabalho.

Você tem que fazer um tr via document.createElement ( 'tr'), em seguida, fazer uma td, da mesma maneira. AppendChild o td ao tr, AppendChild a tr para tbody (não mesa), então você pode InnerHtml o td você criou e ele vai trabalhar. Este foi o IE8 eu estava usando. Basicamente a estrutura da tabela tem de ser feito com createElement mas o resto pode ser innerHTMLed. Eu estava fazendo isso assistindo no depurador IE8 e diria que seria adicioná-lo (se eu fizesse tr.innerhtml = "blah") e dar nenhum erro, mas não iria exibir, ea vista html dom mostrou uma muito quebrado mesa (sem td nunca apareceu, mas a / td fez)

Assim, quando finalmente eu fiz o tr E td por chamadas CreateElement, criou um dom procurando correta e desenhou a página corretamente.