gpt4 book ai didi

javascript - 如何防止 TD 换行?

转载 作者:行者123 更新时间:2023-11-30 11:49:28 24 4
gpt4 key购买 nike

我正在通过 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链接。

最佳答案

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 (createElementappendChild 等)。

关于javascript - 如何防止 TD 换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39942165/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com