2013-03-01 4 views
5

In Internet Explorer questa linea document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML = document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML + string; mi sta dando una SCRIPT600: Invalid target element for this operation. …character 10IE: non valido elemento di destinazione - aggiungendo tabella utilizzando innerHTML + stringa

La stringa è semplicemente quella che contiene un insieme di tablerows. Funziona bene con Chrome, Safari o Firefox. C'è un modo migliore per farlo? Quello che sto facendo è che quando l'utente raggiunge la fine della pagina, aggiungo i tablerows nella tabella per caricare più contenuti. È una specie di tipo AJAX a scorrimento infinito, richiesto dal cliente. Sto usando Javascript e preferirei rimanere con Javascript a questo punto e non passare a jQuery solo per questa attività.

Aggiornamento anche lo stesso con: document.getElementById("left").innerHTML = document.getElementById("left").innerHTML + string; Inoltre, a sinistra è <table id="left">

+5

Non è possibile impostare innerHTML di una tabella, sezione tabella o elemento riga tabella in IE. Puoi usare innerHTML per scrivere un'intera tabella o solo il contenuto di una cella. Usa i metodi DOM. PS. Le pagine Ajax "scrolling infinito" sono un odio per gli animali domestici dato che hanno gravi problemi di usabilità. – RobG

+0

@RobG Penso che quello che stai suggerendo (le tue prime due frasi sembrano essere in conflitto) è quello che ho appena provato: riscrivere l'intera tabella con innerHTML. In secondo luogo, credo che sto usando i metodi DOM. Stai dicendo che devo creare le righe aggiuntive tramite il DOM e non una stringa? Finalmente lo scrolling infinito è richiesto dal cliente. – michaellindahl

+0

@RobG bene Ho tentato di scrivere il codice tutto in DOM ma 'newLink.onclick = function() {toggleVote()};' non voleva ascoltarmi. @KernelJames ha un'ottima soluzione. Sei d'accordo? – michaellindahl

risposta

4

Sì avrete bisogno di metterli in primo luogo come questo:

var div = document.createElement("div"); 
div.innerHTML = "<table><tbody>" + string + "</tbody></table>"; 

document.getElementById("left") 
    .appendChild(div.firstChild.tBodies[0]); 
+1

+1 ma i tag tbody ** ** sono facoltativi quindi non necessari (meno per digitare). L'elemento tbody ** ** è obbligatorio, quindi verrà generato di default. – RobG

0

modo leggermente diverso per quando è necessario inserire una tabella fila alla fine del tavolo. Il tuo nuovo codice, ad es. un nuovo <tr>, dovrebbe essere nella variabile denominata html.

if (document.attachEvent) { //if using old IE 
    var currentTable = document.querySelector("#myTable"); 
    var currentTableHTML = currentTable.outerHTML; 

    //replace closing tag with new code + closing tag 
    currentTableHTML = currentTableHTML.replace("</tbody>", html + "</tbody>"; 

    currentTable.parentNode.removeChild(currentTable); 

    //reinsert the table before some other element - you can use something else if you have a container for the table 
    document.querySelector("#someElement").insertAdjacentHTML("beforebegin", currentTableHTML); 
} 
else { 
    //use insertAdjacentHTML in a normal browser 
}