Как предотвратить появление TD на новой строке?

Question

Я динамически создаю таблицу через Javascript, и я хочу, чтобы таблица продолжалась с правой стороны страницы. Выполнение этого вручную позволяет продолжить работу таблицы, но как только я подаю ее в цикл for, оберните во вторую строку в визуализированном HTML, создав две или несколько строк таблицы, когда они достигнут конца страницы.

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

Это внутри таблицы своего собственного (без форматирования стиля). Тогда 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>"

Вы можете заметить, что есть в <td><div> и что таким образом я могу применить границы маркировки panel. Без <div> кажется, что я не могу этого сделать, и есть и другие нежелательные эффекты. Любые идеи, что я могу сделать, чтобы все <td> s попадали на одну строку, а не делились на новую строку?

Пример того, что я хочу: http://edwardleuf.org/comics/jwb/009-conmet

Что происходит: https://jsfiddle.net/w4uh0a3j/7/

Нажмите Show ссылку.

Answer 1

innerHTML не содержит строковое значение, которое вы присвоите ему.

Он анализирует значение как HTML, создает из него DOM, вставляет его в документ, а затем, когда вы его читаете, он преобразует DOM обратно в HTML.

Это означает, что строка, назначаемая подлежит исправления ошибок и нормализации. В частности, фиксированные теги конца, которые вы пропустили, исправлены.

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>

Итак, когда вы начинаете добавления дополнительных данных к нему:

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

Вы в конечном итоге с:

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

---

Сохраните данные в обычной переменной. Назначьте его только .innerHTML после завершения полного HTML-кода.

Лучший подход, то это было бы забыть о попытке построить HTML путем затирания строк вместе (что чревато ошибками, особенно когда вы начинаете дело с символами, которые нужно избежать в HTML) и использовать DOM (createElement, appendChild, и т.д.).

Answer 2

ОК, здесь исправлены код html и js.Кажется, что innerHTML исправляет отсутствие закрытия при обновлении html до того, как весь код построит остальную часть innerHTML. Этот код работает:

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

</div> 

и JS код:

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;