2

Na função pegar linha eu pego a linha clicada e envio os dados para o formulário e armazeno OBJ da linha e pego index tbm

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

Aqui depois que eu alterei os dados eu crio a tr e passo os dados para tabela, mas ele vai para final eu queria que substitui-se a linha que eu tinha clicado, to quebrando cabeça e não acho solução

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

1 Resposta 1

2

Com remove e after

Uma forma de fazer o que pretende é remover o antigo e adicionar o novo no seu lugar. A remoção é feita com a função remove(), e após isso tem de adicionar com a função after para garantir que o novo <tr> fica a seguir ao <tr> anterior, ao contrário da função append que lhe adiciona como ultimo filho.

Exemplo de construção da sua função de click para remover:

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

Naturalmente isto implica definir a classe delete na imagem que serve como clique:

... 
'<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-->

Com replaceWith

Outra solução ainda mais simples é utilizar diretamente a função replaceWith do Jquery que substitui o elemento selecionado diretamente pelo html recebido como parâmetro:

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

Com html

Uma terceira solução passa por substituir o html do <tr> todo com o novo. Isso implica modificar o novo html para não incluir o proprio <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

E a função de click seria:

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

Documentação para a função after e para replaceWith

3
  • Vlw pela ajuda deu certo OBJ.prev().after(tr); //colocar o novo tr antes deste OBJ.remove(); var contador = 1; $(".classeDaLinha").each(function () { $(this).find("#id").html(contador); $(this).find(".p_quant").prop("name", "quant[" + contador + "]"); contador++; }); $(OBJ).closest('tr').show(); $('#id').val(''); Commented 31/10/2017 às 14:34
  • tem como vc da olhada nesta outra pergunta pt.stackoverflow.com/questions/251275/… Commented 31/10/2017 às 15:20
  • @JuniorRamoty Neste preciso momento não posso, mas mal possa olho para a pergunta, sim.
    – Isac
    Commented 31/10/2017 às 15:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .