使用 ajax 从数据库中删除后如何删除 table 行？

Question

我正在尝试添加 $tr.find('td').fadeOut(1000, function () { $tr.remove(); 单击删除按钮后删除该行，但它不起作用..

function Delete(ID) {
        var ans = confirm("Are you sure you want to delete this Record?");

        if (ans) {
            $.ajax({
                url: '@Url.Action("Delete")',
                data: JSON.stringify({ ID: ID }),
                async: true,
                cache: false,
                type: "Post",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    $tr.find('td').fadeOut(1000, function () {
                        $tr.remove();

                    });
                    //alert(result);
                },
                error: function (errormessage) {

                    alert(errormessage.responseText);
                }
            });
        }
    }

ajax 函数运行良好，该行已从数据库中删除..

Answer 1

你的意思是这样的吗？

success: function (result) {
                    var selector = "#"+ID;
                    $(selector ).fadeOut(1000);
                    setTimeout(function(){
                            $(selector ).remove()
                        }, 1000);
                },

Answer 2

您的代码将失败，因为您使用的 $tr 未在方法内部定义。（如果你在外面定义它，那就更糟糕了）。

您必须能够访问存在删除 button/link 的 tr。如果您使用 onclick 事件处理程序来调用 Delete 方法，您可以将 this 连同您传递的 ID 一起传递给您的 Delete 方法，并从中获取对 tr 的访问权。

jQuery closest 方法在这里会很方便

 <a href="#" onclick="Delete(someId,this)">Delete</a>

而在 js 中

function Delete(id,t) {

    $tr= $(t).closest("tr");

    // make the ajax  call
    // Use $tr now in your ajax call's success event

    $tr.find('td').fadeOut(700, function () {
        $tr.remove();    
    });
}

如果你使用unobtrusive javascript绑定删除按钮的click事件/link，你可以使用$(this)获取对item的引用被点击了。在这种情况下，您实际上可以构建 url 以删除其中包含 id 的操作方法，并将其设置为 link

的 href 值

<td>
     <a href="@Url.Action("Delete",new { id=1234})" class="delete-item">Delete</a>
</td>

将 1234 替换为代码中的实际 id 值在js文件中，你可以使用attr方法读取点击的link的url。

$(function () {

    $("a.delete-item").click(function(e) {
        e.preventDefault();

        $tr = $(this).closest("tr");
        var url = $(this).attr("href");

        $.post(url).done(function() {
            $tr.find('td').fadeOut(700,function() {
                    $tr.remove();
            });
        });

    });
});

Here 是适用于两种解决方案的有效 jsfiddle，供您参考（ 排除了 ajax 调用 ）。

Answer 3

使用 id

<td id="td...">

替换

$tr.find('td').fadeOut(1000, function () {
    $tr.remove();
});

通过

$('#td...').fadeOut(1000, function () {
    $('#td...').remove();
});

使用 ajax 从数据库中删除后如何删除 table 行？

how to remove table row after delete it from the database using ajax?

html

ajax

asp.net-mvc

jquery

asp.net-ajax