如何使用 for 循环构建动态 html答案

【问题标题】：How to build dynamic html with a forloop如何使用 for 循环构建动态 html
【发布时间】：2014-03-12 13:34:23
【问题描述】：

我想动态创建一个表，其中一些表具有指向其他带有循环的 url 的链接，注意：在每个表中，我正在填充动态 html，该 html 具有从数组填充的动态值。我的代码如下所示。当我运行这段代码时，js返回一个数组“unexpected tocken 'for'”，我用while也试过了..错误又是一样的。帮帮我吧。。

html += '<tr class="' + (i % 2 == 0 ? 'grid_color' : '') + '" data-type="record"  data-record-id="' + records[i].id + '" data-row-index="' + i + '">'

+ '<td data-table-col="16" title="' + Samples.htmlEntities(records[i].name_id) + '">' +
for (i = 0; i < nameSplit.length; i++) {
    if (nameSplit[i] != "None") {
        name = nameSplit[i].split(".");
        name = name.shift();
        '<a target = "_blank" href="http://www.google.com/' + name + '">' + name.substr(0, 10 / nameSplit.length) + (name.length > 10 / nameSplit.length ? '...' : '') + '</a>'
    } else {
        if (i != nameSplit.length - 1) {
            "|";
        }
    } else {
        if (i != nameSplit.length - 1) "None".concat("|");
        else "None";
    }
}
}
'</td>'

【问题讨论】：

它是我动态创建表的代码的一部分。问题仅在于其中包含的 for 循环。如果我删除 for 循环，它将正常工作。我想知道在动态创建 html 中应用 forloop 的热度。我真的坚持这一点。 :(
您根本无法使用 for 循环附加字符串。查看错误控制台。 Ypu 必须将循环包装到一个函数中，并从中返回要附加到 html 的值。

标签： javascript html innerhtml dynamic-html

【解决方案1】：

我尝试修复您的代码缩进和格式，但它对我来说是不可读的。但无论如何，我会以你的具体需求为例子进行调整。

var html = "<table>";
for(var i = 0; i<someCondition; i++){
  html +="<tr><td>Cell 1</td><td>Cell 2</td><tr>";
}
html += "</table>";

您遇到的错误是因为在您的代码中某处您有类似 ... + for(...) 的内容，但它不起作用，for 循环不会返回，因此它不会从中得到任何东西。

【讨论】：

【解决方案2】：

你不能那样做。如果您将字符串添加在一起，则需要字符串。如果您此时编写代码，则会将其视为无效字符串，而不是生成实际字符串的代码。

您需要将所有脚本放在将字符串附加到“html”的部分之前。
如果您将其直接写入 html 源代码（这是一种可怕的方法），您应该阅读有关应用脚本的基础知识（不过我想您比这更有经验）。

所以：将脚本放在“html + A + B + ...”之前。

【讨论】：