javascript - 如何防止 TD 换行？

Question

我正在通过 Javascript 动态创建一个表格，我确实希望该表格在页面右侧继续。手动执行此操作让表格继续关闭，但是一旦我将其输入 for循环 <td> s 换行到呈现的 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);
	if(q>50) q=50;
	panelindex.innerHTML = "<table border='0'><tr>"
	for(i=0; i<numpanels; i=i+1)
	{
		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" + 
								"<br />" + i + "</a></div></td>\n";
	}
	panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"

您可能会注意到有一个 <div>在<td>这样我就可以应用标记 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

---

将您的数据存储在常规变量中。完成完整的 HTML 后，才将其分配给 .innerHTML。

更好的方法是忘记尝试通过将字符串混合在一起来构建 HTML(这很容易出错，尤其是当您开始处理需要在 HTML 中转义的字符时)并使用 DOM (createElement、appendChild 等)。