1

Eu tenho uma função que remove a linha de uma tabela, após a remoção eu preciso que seja chamado a function getTotal();. Porém de toda a forma que eu coloco não dá certo, por causa do efeito da linha, eu preciso esperar o efeito passar, e chamar a função. Atualmente estou fazendo desta forma, porém não está dando certo:

function ExcluirProdutoPedido(linha) {
    if ($thatRow == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
        })
        getTotal();
    }
}

Como proceder? EDIT

Função getTotal();

function getTotal() {
    debugger;
    let result = 0;
    let columns = $("#tablepesquisaprodutos tr td:nth-child(" + 8 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#ValorTotalPedido").val(result.toFixed(6).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 11 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TICMS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 13 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TISS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 15 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TIPI").val(result.toFixed(2).replace(".", ","));
    var IPI = document.getElementById("TIPI").value;
    var TotalPedido = document.getElementById("ValorTotalPedido").value;
    var vIPI = 0;
    var vTotalpedido = 0;
    var vTotalProduto = 0;
    vIPI = Number(IPI.replace(/[R\$ \.]/g, '').replace(',', '.'));
    TotalPedido = Number(TotalPedido.replace(/[R\$ \.]/g, '').replace(',', '.'));
    vTotalProduto = TotalPedido - vIPI;
    document.getElementById("ValorProdutos").value = (parseFloat(vTotalProduto).toFixed(6).replace(".", ","));
    DescontoGlobal1();
}
5
  • O que a getTotal() faz? Commented 18/09/2018 às 18:58
  • Ele faz a soma da table @LucasCarvalho. Por isso preciso terminar de remover a linha, senão ele soma errado.
    – Mariana
    Commented 18/09/2018 às 18:59
  • @sam já fiz isso, e não certo.
    – Mariana
    Commented 18/09/2018 às 19:04
  • @sam eu já fiz isso, ele entra na função, ele está entendendo como se a linha não tivesse sido excluída. Continua somando ela, mesmo após a exclusão.
    – Mariana
    Commented 18/09/2018 às 19:21
  • mas está excluindo corretamente? quem passa o valor para "$thatRow "? Commented 18/09/2018 às 19:36

2 Respostas 2

4

O problema é que você está usando .remove() no elemento que chamou a função, ou seja, $thatRow. Veja que o fadeOut() é aplicado ao ancestral tr usando closest("tr"), e na hora de remover, não.

Troque o seletor para:

$(this).remove();

O $(this) aponta para o elemento que chamou o fadeOut, ou seja, a tr em $thatRow.closest("tr").

E chame a função getTotal() dentro do callback do fadeOut():

$thatRow.closest("tr").fadeOut(500, function () {
    $(this).remove();
    getTotal();
})

Exemplo hipotético:

function ExcluirProdutoPedido(linha) {
    if (linha == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $(linha).closest("tr").fadeOut(500, function () {
            $(this).remove();
            getTotal();
        })
    }
}

function getTotal(){
   let columns = $("#tablepesquisaprodutos tr td:nth-child(1)");
   let result = 0;
   columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    console.log(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" id="tablepesquisaprodutos">
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
</table>

1
  • Era isso mesmo, agora deu certo.
    – Mariana
    Commented 18/09/2018 às 19:38
1

Você pode colocar o getTotal() logo após o remove(). Se houver algum problema pode ser porque não deu tempo de atualizar o DOM após excluir a linha, então um pequeno timeout deve resolver:

$thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
            setTimeout(
            function()  {
                getTotal();
             }, 100);
        })

Claro que poderia usar o mesmo código com o setTimeout onde está atualmente a chamada para getTotal, só adicionando um tempo um pouco maior que o efeito do fadeOut, 600 por exemplo:

 $thatRow.closest("tr").fadeOut(500, function () {
        $thatRow.remove();
    })

    setTimeout(
    function()  {
       getTotal();
    }, 600);

Mas não acho que essa seja a melhor forma, a primeira creio que seja a melhor opção.

3
  • Nenhuma das duas deu certo, vou atualizar a pergunta com a função getTotal();
    – Mariana
    Commented 18/09/2018 às 19:14
  • Ele continua somando os valores, eu fiz o teste, ele entra na função, porém ele entende que a linha ainda não foi excluída.
    – Mariana
    Commented 18/09/2018 às 19:25
  • 1
    No seu primeiro exemplo dá para chamar o timeout assim: setTimeout(getTotal, 100). Faz mais sentido e é mais fácil de ler, não acha? Commented 18/09/2018 às 19:32

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 .