Wie verhindert man, dass TD in einer neuen Zeile endet?

Question

Ich erstelle dynamisch eine Tabelle über Javascript und ich möchte die Tabelle von der rechten Seite der Seite fortsetzen. Wenn Sie dies manuell ausführen, wird die Tabelle fortgesetzt, aber sobald ich sie in eine for-Schleife einfüge, wird die zweite Zeile im gerenderten HTML-Code in zwei Zeilen umbrochen, sodass am Ende der Seite zwei oder mehr Tabellenzeilen entstehen.

<div id="panelindex" style="overflow:scroll;text-align:center;"> 
 
    <table border="0"> 
 
    <tr></tr> 
 
    </table> 
 
</div>

Diese in einer Tabelle für sich (ohne Formatierung). Dann wird die Javascript:

var q = Math.floor((1/numpanels)*500); 
 
\t if(q>50) q=50; 
 
\t panelindex.innerHTML = "<table border='0'><tr>" 
 
\t for(i=0; i<numpanels; i=i+1) 
 
\t { 
 
\t \t panelindex.innerHTML = panelindex.innerHTML + "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + zeroFill(i,2) + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" + 
 
\t \t \t \t \t \t \t \t "<br />" + i + "</a></div></td>\n"; 
 
\t } 
 
\t panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"

Sie werden feststellen, dass es eine <div> im <td> und das ist, so kann ich eine Grenze gelten die panel Markierung. Ohne die <div> scheint es, dass ich das nicht tun kann, und es gibt einige andere unerwünschte Effekte. Irgendwelche Ideen, was ich tun kann, so dass alle <td> s enden auf einer Linie, anstatt auf eine neue Linie aufgeteilt?

Beispiel von dem, was ich will: http://edwardleuf.org/comics/jwb/009-conmet

Was geschieht: https://jsfiddle.net/w4uh0a3j/7/

Klicken Sie auf den Link Show.

Answer 1

innerHTML enthält nicht den String-Wert, den Sie ihm zuweisen.

Es analysiert den Wert als HTML, erstellt ein DOM daraus, fügt es in das Dokument ein und konvertiert es dann wieder in HTML, wenn Sie es zurücklesen.

Dies bedeutet, dass die Zeichenfolge, die Sie ist zu Fehlerbehebungs Thema zuordnen und Normalisierung. Insbesondere sind die Endtags, die Sie weggelassen haben, festgelegt.

panelindex.innerHTML = "<table border='0'><tr>" 
 
console.log(panelindex.innerHTML);

<div id="panelindex" style="overflow:scroll;text-align:center;"> 
 
    <table border="0"><tr> 
 

 
    </tr></table> 
 
</div>

Also, wenn Sie mehr Daten, um es zu starten anhängt:

panelindex.innerHTML = panelindex.innerHTML + "<td>etc etc 

Sie am Ende mit:

<table border="0"><tbody><tr></tr></tbody></table><td>etc etc 

---

Speichern Sie Ihre Daten in einer normalen Variablen. Ordnen Sie es erst .innerHTML zu, wenn Sie den kompletten HTML-Code fertig haben. Ein besserer Ansatz als das wäre der Versuch, HTML zu erstellen, indem man Strings zusammenfügt (was fehleranfällig ist, besonders wenn man anfängt, sich mit Zeichen zu befassen, die in HTML zu umgehen sind) und DOM (createElement, appendChild, etc) stattdessen.

Answer 2

OK, hier ist feste HTML und Js-Code.Es scheint so, als ob innerHTML-Fixes beim Schließen von html nicht geschlossen werden, bevor der gesamte Code den Rest von innerHTML erzeugt. Dieser Code funktioniert:

<div id="panelindex" style="overflow:scroll;text-align:center;"> 

</div> 

und js Code:

var numpanels = 100; 


var q = Math.floor((1/numpanels)*500); 
    if(q>50) q=50; 
    panelindex.innerHTML = "<table border='0'><tr>"; 
    var html = "<table border='0'><tr>"; 
    for(i=0; i<numpanels; i=i+1) { 
    html += "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" + 
      "<br />" + i + "</a></div></td>"; 
    } 
    html += "</tr></table>"; 
    document.getElementById("panelindex").innerHTML = html;