Question

我通过Javascript动态创建表格，我希望表格继续在页面的右侧。手动执行此操作可以使表继续关闭，但是一旦我将其提供到for循环中，<td>将换行到渲染HTML中的第二行，当它们到达末尾时创建两个或更多表行页面。

＆＃13;

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

＆＃13;

这是在它自己的表中（没有样式格式）。然后是Javascript：

＆＃13;

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>"

＆＃13;

您可能会注意到<div>中有<td>，因此我可以应用标记panel的边框。如果没有<div>，我似乎无法做到这一点，还有一些其他不受欢迎的影响。我可以做什么，以便所有<td>最终都在一行而不是分成新的一行？

我想要的例子：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等等。

Answer 2

好的，这里修复了html和js代码。似乎innerHTML修复了在所有代码构建其余innerHTML之前更新html时缺少关闭。此代码有效：

<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;

如何防止TD结束新线路？

2 个答案: