Skip to main content
removeu 430 caracteres do conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

É importante achares uma maneira de fazer isso que seja escalável. Ou seja: tenha o mesmo código independentemente do numero de linhas. Isso implica depender menos de ID's que são por natureza únicas. Sugestão de código:

$(document).ready(function () {
    $(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial"'#formularioMateriais').on('keyup', 'input', function (e) {
        var $row = $(thise.target).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10); || 0;
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});

###jsFiddle: http://jsfiddle.net/1jpzqqmv/http://jsfiddle.net/xp3v2grg/6/

O .reduce() é muito util aqui para somar valores de uma array.

Existe um passo que tens de ser tu a dar. As linhas

$(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
    var $row = $(this).closest('.row');

deve ser mudada para

$(document).on('keyup', function (e) {
    var $row = $(e.target).closest('.row');

onde em vez de document deves ter o elemento pai de .row.

É importante achares uma maneira de fazer isso que seja escalável. Ou seja: tenha o mesmo código independentemente do numero de linhas. Isso implica depender menos de ID's que são por natureza únicas. Sugestão de código:

$(document).ready(function () {
    $(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
        var $row = $(this).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10);
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});

###jsFiddle: http://jsfiddle.net/1jpzqqmv/

O .reduce() é muito util aqui para somar valores de uma array.

Existe um passo que tens de ser tu a dar. As linhas

$(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
    var $row = $(this).closest('.row');

deve ser mudada para

$(document).on('keyup', function (e) {
    var $row = $(e.target).closest('.row');

onde em vez de document deves ter o elemento pai de .row.

É importante achares uma maneira de fazer isso que seja escalável. Ou seja: tenha o mesmo código independentemente do numero de linhas. Isso implica depender menos de ID's que são por natureza únicas. Sugestão de código:

$(document).ready(function () {
    $('#formularioMateriais').on('keyup', 'input', function (e) {
        var $row = $(e.target).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10) || 0;
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});

###jsFiddle: http://jsfiddle.net/xp3v2grg/6/

O .reduce() é muito util aqui para somar valores de uma array.

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

É importante achares uma maneira de fazer isso que seja escalável. Ou seja: tenha o mesmo código independentemente do numero de linhas. Isso implica depender menos de ID's que são por natureza únicas. Sugestão de código:

$(document).ready(function () {
    $(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
        var $row = $(this).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10);
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});

###jsFiddle: http://jsfiddle.net/1jpzqqmv/

O .reduce() é muito util aqui para somar valores de uma array.

Existe um passo que tens de ser tu a dar. As linhas

$(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
    var $row = $(this).closest('.row');

deve ser mudada para

$(document).on('keyup', function (e) {
    var $row = $(e.target).closest('.row');

onde em vez de document deves ter o elemento pai de .row.