在Ajax調用后HTML表將不會更新

Question

我正在使用Ajax從“角色”表中刪除一行。 我可以添加角色，並允許用戶從每一行的鏈接中刪除角色。 該函數可以工作並刪除數據庫中的行，但事件發生后表不會更新。 該行似乎從未被刪除。 我需要重新加載視圖嗎？ 不確定如何刷新屏幕以僅反映剩余的行。

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

Answer 1

您需要fadeOut單元格而不是該行。 您可以在fadeOut之后刪除該行，但是如果要使用淡入淡出效果，則必須使用如下所示的內容：

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

這個問題可能會幫助您達到所需的確切效果。

Answer 2

只需調用此代碼

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

代替

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

Answer 3

感謝大家的建議。 完成建議后對我有用的代碼是：

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

由於某種原因，對$（this）的調用無法正常工作，需要使用$（'＃roleRow-'+ roleToDelete）