7

Imaginem que eu tenha uma tabela com um número de linhas que varia dinamicamente (ou seja, o usuário pode inserir mais linhas) sendo que cada linha possui duas colunas com dois campos de texto: quantidade e valor.

Qual seria a forma mais performática de calcular o valor de cada uma dessas linhas e somá-las de forma a mostrar o valor total da minha tabela?

Atualmente eu estou usando o seguinte código:

$(document).on('keyup', '#calculaTotal tbody td input', function () {
    var total = 0;
    $('#calculaTotal tbody tr').each(function () {
        var td = $(this).children('td');
        total += td.eq(0).children('input').val() * td.eq(1).children('input').val();
    });
    $('.total').html(total);
});

Que pode ser visto neste exemplo: FIDDLE

O fato é que esta tabela pode ter n linhas e eu acredito que existam formas mais velozes de se fazer este cálculo total. Alguem tem idéia de como?

Algumas observações:

  • Não é necessário nenhum tipo de tratamento do valor final, isso vai ser tratado posteriormente.
  • Qualquer solução, tanto em vanilla JavaScript quanto com jQuery é bem vinda.
0

2 Respostas 2

5

Assumindo que essa micro-otimização seja mesmo necessária (ex.: a tabela seja gigantesca), minha sugestão seria manter o total pré-calculado e atualizá-lo sempre que uma linha for editada - subtraindo-se o valor antigo e acrecentando-se o valor novo:

var total = 0;
var editando = 0;
var linha1;
var linha2;

$(document).on('focus', '#calculaTotal tbody td input', function () {
    var td = $(this).closest("tr").children('td');
    linha1 = td.eq(0).children('input')[0];
    linha2 = td.eq(1).children('input')[0];
    editando = parseInt(+linha1.value, 10) * parseInt(+linha2.value, 10);
});

$(document).on('keyup', '#calculaTotal tbody td input', function () {
    valor = parseInt(+linha1.value, 10) * parseInt(+linha2.value, 10);
    total = total - editando + valor;
    editando = valor;

    $('.total').html(total);
});

Exemplo no jsFiddle.

Nota: como apontado por Renan, fazer uma query a cada tecla pressionada pode prejudicar a performance, independentemente do tamanho da tabela. Atualizei meu exemplo para só fazer isso durante o onfocus. Não deixa de ser uma micro-otimização, mas pode afetar a responsividade da aplicação, então creio que pode ser sim uma boa ideia prestar atenção nesse detalhe.

1

Sendo bem pedante: seu código faz as queries $('#calculaTotal tbody tr') e $('.total') toda vez que o usuário bate uma tecla. Guarda isso em variáveis que seu código fica mais performático, pois aí você economiza o tempo das queries.

Outra coisa, você tá recalculando sempre que o usuário bate numa tecla, não importa onde ele está. Faça isso somente quando um valor for atualizado ;)

Cria um mapa de inputs e a referência do campo total:

var inputs = {}; // os inputs vão sendo colocados aqui a medida que forem criados.
var campoTotal = $('.total');

Quando criar um input, coloca ele no dicionário assim e inicializa evento assim:

inputs[idDoTeuInput] = $(novoInput);
novoInput.change(function () {
    var total = 0;
    for (var i in inputs) {
        total += Number(inputs[i].val());
    }
    campoTotal.html(total);
});

Não esquece de tirar um input do mapa se a linha correspondente for apagada.

A diferença no tempo de execução, para pequenas quantidades de linhas, pode ser irrisória. Mas se você for fazer um teste de performance com, digamos, dez mil linhas, você começa a perceber a diferença.

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 .