JQuery appendTo追加到顶部不在底部

Posted 2021-04-10

如何使用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行添加在顶部。

我怎样才能解决这个问题，以便在底部添加两行？

谢谢

答案

首先，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的所有ALL项都附加到表体partial1，所有具有类CheckDetails（第1和第2）的表行将被移除到父级并附加到表体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。