Javascript Jquery innerHTML拆分

经过长时间的尝试，我发布了这个问题。我尝试在javascript中使用innerHTML添加数据。它正在添加数据，但格式不正确，如下所示： Html代码：

<div class="table-responsive" id="changeSupplier">
     <table  class="table table-striped table-condensed" id="refreshtbody">
        <thead>
            <tr>
                <th style="background-color: #1B98C8; color: white;">Company Name</th>
                <th style="background-color: #1B98C8; color: white;">Supplier Code</th>
                <th style="background-color: #1B98C8; color: white;">Person Name</th>
            </tr>
        </thead>

        <tbody>
            <c:forEach items="${supplierlst}" var="supplier">
                <tr>
                    <td>
                        ${supplier.var1}
                    </td>
                    <td>
                        ${supplier.var2}
                    </td>
                    <td>
                        ${supplier.var3}
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div> 

公司名称
供应商代码
人名
${supplier.var1}
${supplier.var2}
${supplier.var3}

Javascript代码：

document.getElementById("changeSupplier").innerHTML="";

var list = document.getElementById("changeSupplier");

list.innerHTML += "<table  class='table table-striped table-condensed' id='refreshtbody'><thead><tr>"+
                  "<th style='background-color: #1B98C8; color: white;'>Company Name</th>"+
                  "<th style='background-color: #1B98C8; color: white;'>Supplier Code</th>"+
                  "<th style='background-color: #1B98C8; color: white;'>Person Name</th></tr></thead><tbody>";

for(var i = 0, size = response.length; i < size ; i++){
    var iterator = response[i];
    //alert(supplier.companyName);
    list.innerHTML += "<tr><td>"+iterator.var1+"</td>"+
    "<td>"+iterator.var2+"</td>"+
    "<td>"+iterator.var3+"</td></tr>";      
}

list.innerHTML += "</tbody></table>";

document.getElementById（“变更供应商”）.innerHTML=“”；
var list=document.getElementById（“变更供应商”）；
list.innerHTML+=“”+
“公司名称”+
“供应商代码”+
“人名”；
对于（变量i=0，大小=response.length；i

第一次加载页面时，它在tr的表格式中看起来很棒。但在调用javascript函数通过innerHTML进行追加后，它并没有进入表中

---

请提出建议。

您遇到了错误，因为在for循环中，您从未关闭tbody中的tr元素。html标记的不正确嵌套将中断显示。将其更改为：

list.innerHTML=”“+迭代器.var1+“”+
“”+迭代器.var2+“”+
“+iterator.var3+”

从Pragy更新后编辑：

在alexP建议在将html放在页面上之前使用变量保存html之后。
最终结果应如下所示：

document.getElementById("changeSupplier").innerHTML="";

var list = document.getElementById("changeSupplier");
var snip = '';

snip += "<table  class='table table-striped table-condensed' id='refreshtbody'><thead><tr>"+
                  "<th style='background-color: #1B98C8; color: white;'>Company Name</th>"+
                  "<th style='background-color: #1B98C8; color: white;'>Supplier Code</th>"+
                  "<th style='background-color: #1B98C8; color: white;'>Person Name</th></tr></thead><tbody>";

for(var i = 0, size = response.length; i < size ; i++){
    var iterator = response[i];
    //alert(supplier.companyName);
    snip  += "<tr><td>"+iterator.var1+"</td>"+
    "<td>"+iterator.var2+"</td>"+
    "<td>"+iterator.var3+"</td></tr>";      
}

snip  += "</tbody></table>";
list.innerHTML = snip;

document.getElementById（“变更供应商”）.innerHTML=“”；
var list=document.getElementById（“变更供应商”）；
var-snip=''；
剪断+=“”+
“公司名称”+
“供应商代码”+
“人名”；
对于（变量i=0，大小=response.length；i
您应该将
添加到
列表的末尾。对于
循环+，
中的innerHTML

在创建html格式后，将html写入另一个变量，将其分配给
列表.innerHTML

-添加代码-

var list = "";

list += "<table class='table table-striped table-condensed' id='refreshtbody'><thead><tr>"+
              "<th style='background-color: #1B98C8; color: white;'>Company Name</th>"+
              "<th style='background-color: #1B98C8; color: white;'>Supplier Code</th>"+
              "<th style='background-color: #1B98C8; color: white;'>Person Name</th>/tr></thead><tbody>";

for(var i = 0, size = response.length; i < size ; i++){
    var iterator = response[i];
    //alert(supplier.companyName);
    list += "<tr><td>"+iterator.var1+"</td>"+
    "<td>"+iterator.var2+"</td>"+
    "<td>"+iterator.var3+"</td></tr>";      
}

list += "</tbody></table>";
document.getElementById("changeSupplier").innerHTML = list;

var list=”“；
列表+=“”+
“公司名称”+
“供应商代码”+
“人员姓名/tr>”；
对于（变量i=0，大小=response.length；i
您立即添加HTML，浏览器会修复“错误”。在这种情况下，浏览器将关闭您的
标记。您应该在脚本末尾立即附加HTML。很抱歉，在发布时它就在那里，我忘记了添加它。如果alexP是正确的，那么您应该创建一个临时变量，然后将所有html添加到其中（我通常称之为我的snip）然后在循环后将其分配给list.innerHTML，如果我在forloop中给出变量，并在关闭后使用它，它将给出列表中的最后一条记录。您不会在for循环中生成该变量。您在声明list
var snip=''的行下方创建它
然后，将所有
list.innerHTML+=…
替换为
snip+=…
。然后就在for循环之后，
list.innerHTML=snip
我已经更新了我的问题，它已经存在于代码中。在发布时，我错过了要写的内容。@Pagy您是否尝试使用另一个变量？我的意思是：
var测试=“…”
并调用
document.getElementById（“changeSupplier”）.innerHTML=test