триггер 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

I совета не использовать две меток для ссылок. Используйте только один:

<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

Попробуйте положить код в функцию после сообщения.

Тогда это будет что-то вроде:

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

Но обычно мы не делаем так.

Обычно при загрузке данных мы добавляем идентификатор в тег. Скажем,

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

давайте говорить, если у нас есть идентификатор имя1 в базе данных, мы могли бы добавить ID = 'name1' (и идентификатор = 'Del-1' для удаления кнопки, а). Тогда вам будет проще манипулировать тэгами. Код будет выглядеть вид:

$('#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"); 
}); 

=================================== До тех пор, пока вы можете получить идентификатор в скрипте, вы можете получить такой элемент:

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

Надеюсь, это поможет.

Answer 4

Что я предлагаю, так или иначе таблица динамически генерируется при загрузке из базы данных. Так набор идентификатор для тра как

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