ajax功能成功刷新表

Question

I have the following table where I have two buttons to delete and update. When I delete it automatically removes the table row. But when I edit the line and change the state, the user still sees the line, where it gets confusing because they don't know the lines that have already been edited and the ones left to edit. So when changing state the row should also disappear from the table.

Code:

<div id="spoiler2" class="esconde">
<table class="table table-responsive" id="employee_table2"> 
<h1 style="font-size: 30px"><strong>Pedidos de Manutenção</strong></h1>
<thead>  
<tr> 
<th>Data</th>
<th>Valência</th>
<th>Descrição</th>
<th>Colaborador</th>        
<th>Estado</th> 
<th>Ação</th>   
<th>Eliminar</th>                           
</tr> 
</thead>
<tbody>
<?php  do{ ?>
<tr  id="<?php echo $produto2["Id"]; ?>">
<td><?php echo $produto2["DataRegisto"]; ?></td> 
<td><?php echo $produto2["Destino"]; ?></td> 
<td><?php echo $produto2["Descricao"]; ?></td> 
<td><?php echo $produto2["nome"]; ?></td>
<td><?php echo $produto2["Estado"]; ?></td>
<td><button type="button" name="edit" data-id="<?php echo $produto2["Id"]; ?>" id="open_<?php echo $produto2["Id"]; ?>" data-target="#add_data_Modal2" class="btn btn-warning btn-sm edit_data2" ><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>  
<?php } while($produto2 = $result2->fetch_assoc()); ?>
</tbody>      
</table>   
</div>

js:

$(document).on('click', '.edit_data2', function(){  
           var employee_id2 = $(this).data('id');          
           $.ajax({  
                url:"./editarmanutencao",  
                method:"POST",
                cache: false,               
                data:{employee_id2:employee_id2},               
                dataType:"json",  
                success:function(data){

                    console.log(data);
                     $('#Id2').val(data.Id);
                     $('#Tratamento').val(data.Tratamento);
                     $('#Estado2').val(data.Estado);
                     $('#Prestador').val(data.Prestador);
                     $('#employee_id2').val(data.Id);                    
                     $('#insert2').val("Gravar");  
                     $("#add_data_Modal2").modal("show");                    
                }  
           });

      });  

function inserir_registo2()
{  

    var dadosajax = {
        'Id' : $("#Id2").val(),
        'DataTermino' : $("#DataTermino").val(),
        'Tratamento' : $("#Tratamento").val(),
        'Estado' : $("#Estado2").val(),
        'Prestador' : $("#Prestador").val()
    };
    $.ajax({
        url: './resolucaomanutencao',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
        $("#add_data_Modal2").modal("hide");
         }  
    });
}

How can I remove the table row by changing ajax's success state?

Answer 1

If i understand correctly, you want to remove row from table after successful Edit operation. If this is the case, you can use following code...

function inserir_registo2()
{  
    let rowToBeRemoved =  $("#"+$("#Id2").val());
    var dadosajax = {
        'Id' : $("#Id2").val(),
        'DataTermino' : $("#DataTermino").val(),
        'Tratamento' : $("#Tratamento").val(),
        'Estado' : $("#Estado2").val(),
        'Prestador' : $("#Prestador").val()
    };
    $.ajax({
        url: './resolucaomanutencao',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
        $("#add_data_Modal2").modal("hide");
        if(<<Condition>>) // in case you want to validate something before removing row
         {
           rowToBeRemoved.remove();
          }
      }  
    });
}

Answer 2

在 ajax 调用之前保存对父行的引用（例如var row = $(this).closest('tr') ），然后在成功时通过row.remove()删除它。