Ajax调用后，HTML表将不会更新

HTML table will not update after Ajax call

本文关键字：更新 HTML 调用 Ajax      更新时间：2023-09-26

我正在使用Ajax从Roles表中删除一行。我可以添加角色，并允许用户从每行的链接中删除角色。该函数工作并删除数据库中的行，但事件发生后不会更新表。对于用户来说，该行似乎从未被删除。我需要重新加载视图吗？不确定如何刷新屏幕以仅反映剩余行。

<div id="roleTable">
<table class="table">
    <tr><th>Role</th><th>Description</th><th>Delete</th></tr>
    @{int count = 0;}
    @foreach (var b in ViewBag.roles)
    {
        string color = "";
        if (count % 2 == 0)
        {
            color = "";
        }
        else
        {
            color = "success";
        }
        count++;
        <tr class=@color id="roleRow-@b.RoleGUID">
            <td>@b.Role</td>
            <td>@b.Description</td>
            <td><a href="#" class="removeLink" data-id="@b.RoleGUID"  onclick="return confirm('Are you sure');">Remove</a></td>
        </tr>
    }
</table>
</div>
<p id="result">
</p>
jQuery代码：

<script>
    
    $("#roleTable").on("click",".removeLink", function () {
        
        var roleToDelete = $(this).attr("data-id");
        if (roleToDelete != '') {
            $.post("/UserRoles/RemoveRole", { "RoleGUID": roleToDelete },
                 function (data) {
                     $("#roleRow-" + roleToDelete).fadeOut('slow');
                     $("#result").text(data.Message).fadeOut(5000);
                 });
        }
    });
   
</script>

您需要fadeOut单元格，而不是行。你可以删除淡出后的行，但如果你想要淡出效果，你必须使用这样的东西：

$("#roleRow-" + roleToDelete + " td").fadeOut('slow');

这个问题可能会帮助你达到你想要的效果。

只需调用此代码

$("#roleRow-" + roleToDelete).remove();

代替

$("#roleRow-" + roleToDelete).fadeOut('slow');

感谢大家的建议。在完成建议后，对我有效的代码是：

 $('#roleRow-'+roleToDelete).closest('tr').remove();

由于某种原因，对$（this）的调用不起作用，需要使用$（'#roleRow-'+roleToDelete）

相关文章：