jQuery appendTo在頂部而不是底部追加

Question

如何使用appendTo函數將選定的類附加到底部？

返回html字符串的Ajax代碼：

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，該行添加在底部，而第二個表＃partial1行，添加在頂部。

如何解決此問題，以便將兩行都添加到底部？

謝謝

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>

由於所有具有CheckDetails類的所有項目都追加到表主體partial1 ，因此所有具有CheckDetails類（第1和2nd）的表行都將被刪除到父級，並追加到表主體partial1 。 由於第二行在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 。