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本身你可以通过

删除tr

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");
}

Answer 4

尝试在post函数中删除代码。

然后它会是这样的：

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

但通常我们不会这样做。

通常在加载数据时，我们会在标记中附加一个id。说，

<tr><td>name1</td><td><a href="javascript:del(2)"><span>del</span></a></td></tr>

假设我们在数据库中有name1的id，我们可以附加id ='name-1'（并且id ='del-1'也用于删除按钮）。然后，您将更容易操纵tr标签。代码看起来像：

$('#del-1').click(function() {
$.post('{{path('acme_member_delScore')}}',              
    {data1: num }, function(response){
        if(response.code == 100 && response.success){//dummy check
          //parse the id, get the index. 
          $('#name-1').remove();
        }
  }, "json");
});

=================================== 只要您可以在脚本中获取id，就可以获得这样的元素

var tempId = '#name-' + 1;
$(tempId).remove();

希望这有帮助。

同时触发Ajax和刷新表

4 个答案: