JQuery приложение к добавлению сверху, а не снизу

Question

Как добавить выбранный класс в конец, используя функцию appendTo?

Ajax-код, который возвращает HTML-строку:

function GetRow() {
        var form = $('form');
        $.ajax({
            url: '/Journals/CreateJournalDetails',
            success: function (data) {
                $('#partial').append('<tr>' + data + '</tr>');
                $('.CheckDetails').appendTo('#partial1');
                form.data('validator', null);
                $.validator.unobtrusive.parse(form);
            }
        });
    }

HTML код:

<div class="form-group">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            --header here
                        </tr>
                    </thead>
                    <tbody id="partial"></tbody>
                </table>
            </div>
        </div>
        <div class="form-group">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            --header here
                        </tr>
                    </thead>
                    <tbody id="partial1"></tbody>
                </table>
            </div>
        </div>

CreateJournalDetails частичный код:

    @model SimplyAccounting.Models.TransactionViewModels.JournalDetailsViewModel
@using (Html.BeginCollectionItem("JournalDetailsViewModel"))
{
    <tr class="CheckDetails" id="@Model.Guid">
        <td>@Model.Guid</td>
        <td>
            @Html.TextBoxFor(model => model.Check_Number, new { @class = "form-control form-control-sm" })
            @Html.ValidationMessageFor(model => model.Check_Number, null, new { @class = "text-danger" })
        </td>
        --code etc here..
        </td>
    </tr>

    <tr class="DocumentDetails" id="@Model.Guid">
        <td>@Model.Guid</td>
        <td scope="row">
            @Html.DropDownListFor(model => model.Gla_Code, Model.Gla_List, "--please select an item--", new { @class = "form-control form-control-sm glaSelect" })
            @Html.ValidationMessageFor(model => model.Gla_Code, null, new { @class = "text-danger" })
        </td>
        --code etc here..

        <td><button type="button" class="btn btn-sm btn-danger" id="delete" name="delete" value="delete" onclick="javascript: deleteBook(document.getElementById('@Model.Guid'))"><i class="far fa-trash-alt"></i></button></td>
    </tr>

}

Я сгенерировал Guid для проверки правильности строки, пример вывода:

И когда я запускаю функцию GetRow, пример вывода

первая таблица #partial, строка добавляется внизу, а вторая строка таблицы # serial1 добавляется вверху.

Как я могу исправить эту проблему, чтобы обе строки были добавлены внизу?

Спасибо

Answer 1

Для начала appendTo делает то, что ожидал. Обратный порядок связан с неправильным селектором CSS. Что случилось, твой код таков.

1. Из ответа ajax ($('#partial').append('<tr>' + data + '</tr>');) строки таблицы CheckDetails и DocumentDetails добавляются к телу таблицы partial. Тело таблицы partial1 пусто.

<tbody id="partial">
  <tr class="CheckDetails">1st...</tr>
  <tr class="DocumentDetails">1st...</tr>
</tbody>
<tbody id="partial1"></tbody>

2. Затем ВСЕ элементы с классом CheckDetails ($('.CheckDetails').appendTo('#partial1');) добавляются к телу таблицы partial1. На этом этапе все в порядке.

<tbody id="partial">
  <tr class="DocumentDetails">1st...</tr>
</tbody>
<tbody id="partial1">
  <tr class="CheckDetails">1st...</tr>
</tbody>

3. Однако когда мы повторяем шаги 1 и 2 для следующего пункта.

<tbody id="partial">
  <tr class="DocumentDetails">1st...</tr>
  <tr class="CheckDetails">2nd...</tr>
  <tr class="DocumentDetails">2nd...</tr>
</tbody>
<tbody id="partial1">
  <tr class="CheckDetails">1st...</tr>
</tbody>

Поскольку все ALL элементы с классом CheckDetails добавляются в тело таблицы partial1, вся строка таблицы с классом CheckDetails (1-й и 2-й) будет удалена в родительский элемент и добавлена ​​в тело таблицы partial1. Так как 2-я строка находится выше 1-й строки в html , результат будет

<tbody id="partial">
  <tr class="DocumentDetails">1st...</tr>
  <tr class="DocumentDetails">2nd...</tr>
</tbody>
<tbody id="partial1">
  <tr class="CheckDetails">2nd...</tr>
  <tr class="CheckDetails">1st...</tr>
</tbody>

Чтобы решить эту проблему, держите свой код, чтобы делать то, что он должен, ни больше ни меньше Обновите $('.CheckDetails').appendTo('#partial1'); до $('tbody#partial>tr.CheckDetails').appendTo('#partial1');, чтобы только строка таблицы принадлежала partial и добавлялась к partial1.