同时触发Ajax和刷新表

Question

下面有这样的桌子。

这个表显示了数据库的竞争情况。

<table>
<tbody id="2"><tr><td>name1</td><td><a href="javascript:del(2)"><span>del</span></a></td></tr></tbody>
<tbody id="6"><tr><td>name2</td><td><a href="javascript:del(6)"><span>del</span></a></td></tr></tbody>
</table>

‘'del’链接调用Ajax并从数据库中删除项。

function del(num){
  $.post('{{path('acme_member_delScore')}}',              
    {data1: num },     function(response){
        if(response.code == 100 && response.success){//dummy check
          //do something
           var tbody = document.getElementById(num);
           var tr // i want to get tr
           tbody.removeChild(tr);  

        }
  }, "json");
}

如何刷新表？

Answer 1

我建议不要使用两个标签的链接。只使用一种：

<table>
<tr><td>name1</td><td><span data-del="2">del</span></td></tr>
<tr><td>name2</td><td><span data-del="6">del</span></td></tr>
</table>

在同一个处理程序中完成所有操作。并使用“最近”来查找父级TR：

$('span[data-del]').click(function(){
  var obj = $(this);
  var num = $(this).attr('data-del');
  $.post('{{path('acme_member_delScore')}}',              
    {data1: num }, function(response){
    if(response.code == 100 && response.success){
      obj.closest('tr').remove();
    }
  }, "json");
});

Answer 2

$.ajax({url: {{path('acme_member_delScore')}}, type: "post",
data: { data1: num },
success: function (data, textStatus, jqXHR) {
// run code here to refresh table
}, error: function(jqXHR, textStatus, errorThrown) {
//run code here to display error
}
});

Answer 3

我建议的是，无论如何，当从数据库加载时，表会动态生成。因此，为tr设置id，如

<table>
<tr id="tr_2"><td>name1</td><td><a href="javascript:del(2)"><span>del</span></a></td></tr>
<tr id="tr_6><td>name2</td><td><a href="javascript:del(6)"><span>del</span></a></td></tr>
</table>

这样，在Ajax中，您就可以通过

function del(num){
  $.post('{{path('acme_member_delScore')}}',              
    {data1: num },     function(response){
        if(response.code == 100 && response.success){//dummy check
          //do something
          $("#tr_"+num).remove();
        }
  }, "json");
}