JQuery appendTo 附加在顶部而不是底部答案

【问题标题】：JQuery appendTo appending at top not at the bottomJQuery appendTo 附加在顶部而不是底部
【发布时间】：2019-02-10 02:48:09
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： javascript jquery html asp.net-mvc append

【解决方案1】：

首先，appendTo 正在做预期的事情。反向排序是由于错误的 CSS 选择器造成的。你的代码中发生的事情就是这样。

从 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>

然后 ALL 类 CheckDetails ($('.CheckDetails').appendTo('#partial1');) 的项目被附加到表体 partial1。这一步一切都很好。

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

但是，当我们为下一项重复第 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。

【讨论】：