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');）的 ALL 个项目附加到表主体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。

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

1 个答案: