Question

最近，我一直致力于使用JQuery解析JSON并在HTML视图中显示它的Web应用程序。我无法弄清楚为什么以下代码输出的表在第一个.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);

    });
});

Answer 2

我建议您将代码修改为：

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {
        $('<table>').addclass('encoders').appendTo('#displayencoders');
        $('<tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>').appendTo('.encoders');

        $.each(data, function(i, item) {
            $("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>").appendTo('.encoders');
        });

    });
});

Answer 3

我认为不需要动态创建表标记。从包含以下内容的html开始：

<table id="encoder-table" class="encoders">
    <tr class="rows">
       <th class="j">Encoder Name</th>
       <th class="j">Status</th>
    </tr>
</table>

然后：

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

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

JQuery：无法正确显示表格

3 个答案: