Question

如果要删除表行，该如何使用某些效果，因为现在我只是使用reload（）函数刷新数据。

我的桌子是这样的：

<table class="sortable" border="1" id="table2">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td width="50%">@item.name</td>
                <td>

                    <button onclick="Remove('@item.name', '@item.age')" type="button" class="btn btn-danger">
                        Remove
                    </button>


                </td>
            </tr>
        }
    <tbody>
</table>

要删除的脚本然后刷新：

 function Remove(name, age) {
        var result = confirm("Are you want to remove " + name);
        if (result == true) {

            $.ajax({
                url: '/Home/Remove',
                type: 'POST',
                data: {
                    'id': name,
                },
                success: function (data) {
                    location.reload() //---> Want to have effects rather than refresh
                    alert('Data has been successfully removed');
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    }

Answer 1

在HTML的onclick处理程序中，将this作为参数传递给Remove方法。

onclick="Remove(this, '@item.name', '@item.age')"

向您的方法添加一个新参数以接受它。单击删除按钮后，将成为按钮元素。

现在使用closest方法获取对外部表行的引用。现在，在ajax方法的success处理程序中，您可以调用fadeOut方法，然后最终从DOM中删除表行。

function Remove(that, name, age) {
        var result = confirm("Are you want to remove " + name);
        if (result == true) {

           // Get the jQuery object of the outer TR of clicked button
           $tr = $(that).closest("tr");

            $.ajax({
                url: '/Home/Remove',
                type: 'POST',
                data: {
                    'id': name,
                },
                success: function (data) {
                     $tr.find('td').fadeOut(400,function() {
                          $tr.remove();
                     });
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    }

asp mvc动画删除表行

1 个答案: