使用 ajax+JQuery+JSON 的表刷新问题答案

【问题标题】：table refresh issue using ajax+JQuery+JSON使用 ajax+JQuery+JSON 的表刷新问题
【发布时间】：2015-12-24 13:52:09
【问题描述】：

我有一个以 HTML 表格格式填充的记录。我在最后一列有一个带有垃圾桶图像的 achor 标签。单击图像后，我尝试删除该行并使用新数据再次填充表。我正在使用 $.getJSON() 调用并迭代列表以形成表格的行。该操作被调用，相应的记录被从数据库表中删除，但 jsp 页面中的表没有被刷新。请查看以下两张图片以更好地理解我的问题。

我点击了第一行垃圾桶以删除表格的第一行，但表格没有刷新，它正在将整个记录附加到表格的末尾。如果我刷新页面，那么它的表格就会正确显示。下面是我的 JQuery 代码。请有人建议我解决这个问题。

jQuery 脚本：

 $(".deleteUserIncomesJson").click(function(e){
    e.preventDefault();
    var tempID = $(this).attr('data'); //Fetch income id        
    $.getJSON("deleteUserIncomesJson",{incomeID:tempID},function(data){
        $(this).closest('tr').remove();
         $.each(data.incomesList,function(index){
            $(".defaultTable").append("<tr><td>"+data.incomesList[index].catergory.userCodeName+"</td>"+
                    "<td>"+data.incomesList[index].payee.payeeName+"</td>"+
                    "<td>"+data.incomesList[index].description+"</td>"+
                    "<td>"+data.incomesList[index].transactionDate+"</td>"+
                    "<td>"+data.incomesList[index].amount+"</td>"+
                    "<td>&nbsp;&nbsp;</td>"+
                    +"</tr>");

        }); 

    }); 

});

HTML 代码：

 <a style="text-decoration: none" class="deleteUserIncomesJson" href="#" id="{<tags:property value="incomeID"/>}" data="<tags:property value="incomeID"/>">
    <img width="20px" height="20px" src="<tags:url value="/image/Trash.png"/>" height="15"/>
 </a>

【问题讨论】：

它完全按照您在代码中的要求执行。手动追加到表的末尾。相反，您需要将数据合并到现有行中（例如，找到该行并更改每列的内容）。
但我喜欢代码 $(this).closest('tr').remove();应该删除第一行？正如您可以在两个图像的表中出现的所有行。如果我刷新数据，那么它会填充正确数量的记录（5 条记录）
回调函数中的$(this)不是你点击的元素，是window。如何在回调中访问this，请参阅重复消息。
秒表无关紧要，关键是this 没有在闭包中捕获。您需要绑定一个局部变量，如一些答案所示。在调用$.getJSON之前使用var self = this;，然后在回调函数中使用$(self)而不是$(this)。
至于为什么您没有在新行上获得任何样式，您要添加的 HTML 中没有任何类。你能显示原始表格的 HTML 吗？您也没有添加 edit 和 trash 图标。

标签： jquery json ajax

【解决方案1】：

@Barmar 和其他人的建议。我现在能够完成我的要求。下面是我的最终 jquery 函数，它是一个冠军链接。我也不需要处理 css。它只是从我的表中删除所需的行。

再次感谢您

$(".deleteUserIncomesJson").click(function(e){
    e.preventDefault();
    var self=this;
    var tempID = $(self).attr('data'); //Fetch income id        
    $.getJSON("deleteUserIncomesJson",{incomeID:tempID},function(data){
        $(self).parent('td').parent('tr').remove();
    });

});

【讨论】：