Subistituir dynamic table row

Question

In the catch line function I pick up the clicked line and send the data to the form and store OBJ from the line and get index tbm

var index = $(obj).closest('tr').find('td').eq('0').text();

Here after I changed the data I create the tr and pass the data to table, but it goes to final I wanted it to replace the line I had clicked, to breaking head and I can not find solution

 var tr =
    '<tr class="classeDaLinha">' +
    '<td class="id" id="id"  >' + id + '</td>' +
    '<td class="name">' + name + '</td>' +
    '<td class="qtde" >' +
    '<input style="width:50px;" type="number" name="quant[' + id + ']" id="quant[' + id + ']" class="p_quant" value="' + qtde + '"  onkeyup="updateSubtotal(this)" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
    '</td>' +
    '<td class="num_modulos"> ' + num_modulos + '</td>' +
    '<td class="obs_item"> ' + obs_item + '</td>' +
    '<td class="price"> ' + price + '</td>' +
    '<td class="subtotal">' + subtotal + '</td>' +
    '<td><img src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete" onclick="excluirProd(this)"/>\n\
            <img src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar" onclick="pegar_valor_linha_tabela_editar(this)"/></td>' +
    '</tr>';
$('#products_table tbody').append(tr);

Answer 1

With remove and after

One way to do what you want is to remove the old one and add the new one instead. Removal is done with the function remove(), and after that has to add with the function after to ensure that the new <tr> is next to the <tr> previous, unlike the function append who adds him as the last son.

Example of building your click function to remove:

$(".edit").click(function(){
    const tdRemover = $(this).closest("tr"); //obter o tr acima

    trRemover.prev().after(tr); //colocar o novo tr antes deste
    trRemover.remove(); //remover este tr
});

Naturally this implies defining the class delete in the image that serves as click:

... 
'<td><img class="delete" src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete"/>....
<!--     ---------^class delete aqui, e sem o atributo onclick-->
n\<img class="edit" src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar"/>
<!--     ------^class edit aqui, e sem o atributo onclick-->

With replaceWith

Another even simpler solution is to use the function directly replaceWith of Jquery that replaces the element selected directly by the html received as parameter:

$(".edit").click(function(){
    $(this).closest("tr").replaceWith(tr); //substituição direta
});

With html

A third solution is to replace the html of <tr> all with the new. This implies modifying the new html to not include the own <tr>:

var tr =
    //sem o '<tr>' aqui no inicio 
    '<td class="id" id="id"  >' + id + '</td>' +
    '<td class="name">' + name + '</td>' +
    ...; //sem o '</tr>'; no fim

And the click function would be:

$(".edit").click(function(){
    $(this).closest("tr").html(tr); //colocar o html como conteudo
});

Documentation for the function after and to replaceWith