JQuery: возникают проблемы с отображением таблицы

Question

Недавно я работал над веб-приложением, которое использует JQuery для анализа JSON и отображения его в представлении HTML. Я не могу понять, почему таблица, которую выводит следующий код, заканчивает тег сразу после первого метода .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

Не думаю, что нужно динамически создавать тег таблицы. Начните с 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>");
        });
    });
});

Answer 3

Я предлагаю изменить ваш код на:

$("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');
        });

    });
});