Question

经过长时间的尝试，我发布了这个问题。我正在尝试使用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>

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

第一次加载页面时，它以tr.But的表格格式看起来很棒，在调用javascript函数后通过innerHTML追加它不会进入表格内部。

请提出建议。

Answer 1

您遇到错误，因为在for循环中，您永远不会关闭t体中的tr元素。不正确的html标记嵌套会破坏显示。将其更改为：

list.innerHTML = "<tr><td>"+iterator.var1+"</td>"+ "<td>"+iterator.var2+"</td>"+ "<td>"+iterator.var3+"</td></tr>";

在Pragy更新后进行编辑：

在alexP建议使用变量保存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;

Answer 2

~~您应该将</tr>添加到list.innerHTML循环加for的末尾，~~

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

-ADDED CODE -

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;

Jquery innerHTML拆分

2 个答案: