JQuery:无法正确显示表格

Question

最近我一直在开发一个 Web 应用程序，该应用程序使用 JQuery 解析 JSON 并将其显示在 HTML View 中。我无法弄清楚为什么下面的代码输出的表格在第一个 .append 方法之后立即结束标记。

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $("#displayencoders").append('<table class="encoders"><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>');

        $.each(data, function(i, item) {
            $("#displayencoders").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });

        $("#displayencoders").append("</table>");

    });
});

上面的代码将输出下面的 HTML。

<table class="encoders">
<tbody><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr></tbody>
</table>
<tr><td>rmcp2-encoder</td><td>inactive</td></tr><tr><td>rmcp2-encvm1</td><td>active</td></tr><tr><td>rmcp2-encvm2</td><td>active</td></tr><tr><td>rmcp2-encvm3</td><td>active</td></tr><tr><td>rmcp2-encvm4</td><td>inactive</td></tr><tr><td>rmcp2-encvm5</td><td>active</td></tr><tr><td>rmcp2-encvm6</td><td>active</td></tr><tr><td>rmcp2-encvm7</td><td>inactive</td></tr><tr><td>rmcp2-encvm8</td><td>inactive</td></tr>

换句话说，如何修改现有的 JQuery 代码以将标记移动到实际表的末尾？

提前致谢。

Answer 1

当你使用append()时，DOM会更新。我认为(这可能因浏览器而异)，如果您打开一个元素，将其添加到 DOM，浏览器将“帮助”您，并为您关闭标签。解决这个问题的最好方法是在函数中创建一个变量，并且只有在拥有所有代码时才附加 html:

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        var html = '<table class="encoders"><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>';

        $.each(data, function(i, item) {
            html += "<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>";
        });
            html += "</table>";
        $("#displayencoders").append(html);

    });
});