TDが新しい行で終わるのを防ぐ方法は？

Question

私は動的にJavascriptを使ってテーブルを作成していますが、テーブルをページの右側から削除します。これを手動で実行するとテーブルがオフになりますが、これをforループに入力すると、<td>がレンダリングされたHTMLの2行目にラップし、ページの最後に2つ以上のテーブル行が作成されます。

<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>がすべて新しい行に分割されるのではなく、1行になるように私ができることは何ですか？私が何をしたいの

例：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 

---

データを通常の変数に格納します。完成したHTMLを完成した後にのみ.innerHTMLに割り当ててください。

より良いアプローチは、そのは、DOM（createElement、appendChildなどを（あなたがHTMLでエスケープ必要文字を扱う始める特に一度、エラーが発生しやすくなる）一緒に文字列を叩解してHTMLを構築しようとし忘れると使用することです）代わりに。

Answer 2

OK、ここでは固定の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;