Skip to main content
Pergunta reaberta por Sergio, ramaral, jpmnteiro, gmsantos, Paulo Rodrigues
adicionou 216 caracteres ao conteúdo
Fonte Link
Tiago
  • 2,4mil
  • 5
  • 29
  • 62

Olá, preciso fazer o calculo de cubagem (largura xPreciso calcular a largura * altura x* comprimento) x * quantidade.

O códio tem um função onde adiciona novas linhasScript esta calculando apenas dos campos que inicial, os que são adicionados de acordo com a necessidade não são incluídos no calculo. Primeiro faz o

O primeiro calculo é de cada linha:

#cubagemMateriais = (.comprimentoMaterial * .larguraMaterial * .alturaMaterial) * .volumeMaterial

Soma todos os recultados #cubagemMateriais e depois faz a soma total de cada linhaexibe no:

#cubagemMateriaisTotal

#Testes

Parece que o cloque não funciona.

http://jsfiddle.net/xp3v2grg/4/ Meu código:

<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>
        
            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>

            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >
        
$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div><b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" ><hr></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

$(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);
    });
});
<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>
        
            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>

            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >
            
JS

 
$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div><input name="cubagemMateriais[]" id="cubagemMateriais" ></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

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

Olá, preciso fazer o calculo de cubagem (largura x altura x comprimento) x quantidade

O códio tem um função onde adiciona novas linhas de acordo com a necessidade. Primeiro faz o calculo de cada linha e depois faz a soma total de cada linha.

http://jsfiddle.net/xp3v2grg/4/

$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div><b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" ><hr></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

$(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);
    });
});
<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>
        
            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>

            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >
            

 

Preciso calcular a largura * altura * comprimento * quantidade.

O Script esta calculando apenas dos campos que inicial, os que são adicionados de acordo com a necessidade não são incluídos no calculo.

O primeiro calculo é de cada linha:

#cubagemMateriais = (.comprimentoMaterial * .larguraMaterial * .alturaMaterial) * .volumeMaterial

Soma todos os recultados #cubagemMateriais e exibe no:

#cubagemMateriaisTotal

#Testes

Parece que o cloque não funciona.

Meu código:

<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>
        
            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>

            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >
        
JS

$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div><input name="cubagemMateriais[]" id="cubagemMateriais" ></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

$(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);
    });
});
adicionou 2018 caracteres ao conteúdo
Fonte Link
Tiago
  • 2,4mil
  • 5
  • 29
  • 62

http://jsfiddle.net/xp3v2grg/4/

$(document).ready(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $(".alturaMaterial"'a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).mouseoverclick(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" 
 required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" qtdvalue="" =required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div><b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" ><hr></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div>').appendTo(divContent2);
        $(".volumeMaterial"'#removehidden2').valremove();
        i2++;
    com =   $(".comprimentoMaterial"'<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').valappendTo(divContent2);
    });

    //Cliquando em remover a larlinha =é eliminada
    $("'#formularioMateriais').larguraMaterial"on('click', '.linkRemover2', function () {
        $(this).valparents('.conteudoIndividual2').remove();
        i2--;
    alt});
});

/////////////////////////////////////////////////////////////////////////////////////////////////

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

        // somar todas as linhas
        var total = $("#cubagemMateriais"'input[name="cubagemMateriais[]"]').valget(cubagemMateriais).reduce(function (soma, input) {
            var value = parseInt(input.value, 10);
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});
.css1{width:80px;height:20px;}
.css2{width:180px;height:20px;}
.css3{width:80px;height:20px;background: #FFDDDE;}
.css4{width:100px;height:20px;background: #CAFFD8;}
<script<div src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>id="formularioMateriais">
<input name="volumeMaterial[]"      class="volumeMaterial form-control css1"    <div class="row">
 placeholder="Volume"      type="number"   value="">
   Volume.........: <input name="nomeMaterial[]"      name="volumeMaterial[]" id="" class="nomeMaterialtype="number" formclass="form-control css2"        placeholder="Materiais"   type="text"   volumeMaterial" value="" value="">required><br>
    <input name="comprimentoMaterial[]" class="comprimentoMaterial form-control css1" placeholder="Comprimento" type="text"     value="">
    Material.........:<input name="larguraMaterial[]"  name="nomeMaterial[]"  id="" class="larguraMaterialtype="text" formclass="form-control css1"     placeholder="Largura"nomeMaterial" value="" required><br>
   type="text"     value="">
    Compimento..:<input name="alturaMaterial[]"   name="comprimentoMaterial[]"  id="" class="alturaMaterialtype="text" formclass="form-control css1"      placeholder="Altura"      type="text"   comprimentoMaterial" value="" value="">required><br>
        
     Largura..........:<input name="cubagemMateriais[]"name="larguraMaterial[]" id="cubagemMateriais"id="" type="text" class="css3" >
 class="form-control larguraMaterial" value="" required><br>
    <hr><p>
    
     Altura.............:<input name="volumeMaterial[]"   name="alturaMaterial[]"  id="" class="volumeMaterialtype="text" formclass="form-control css1"      placeholder="Volume"      type="number" alturaMaterial" value="" value="">required>
    <input name="nomeMaterial[]"        
 class="nomeMaterial form-control css2"        placeholder="Materiais"  <a type="text"href="#" class="btn btn-success btn-xs adicionarCampo2" value="">
data-id="2" id="" style="margin:35px 0 <input0 name="comprimentoMaterial[]"0"><i class="comprimentoMaterialclass="fa formfa-control css1" placeholder="Comprimento" type="text"  plus bigger-110 icon-only"></i>+ value=""></a><br>
    <input name="larguraMaterial[]" 
     class="larguraMaterial form-control css1"     placeholder="Largura"<b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text"     value="">>
    <input name="alturaMaterial[]"      class="alturaMaterial form-control css1"      placeholder="Altura"      type="text"     value=""><hr>
        </div>
  </div>
Soma total <input name="cubagemMateriais[]" id="cubagemMateriais" type="text" class="css3"id="cubagemMateriaisTotal" >
    
     <hr><p>
    Cubagem total: <input type="text" id="cubagemMateriaisTotal" class="css4" >

$(document).ready(function() {
        $(".alturaMaterial").mouseover(function() {
                        
             qtd = $(".volumeMaterial").val();
            com = $(".comprimentoMaterial").val();
            lar = $(".larguraMaterial").val();
            alt = $(".alturaMaterial").val();
            
            var cubagemMateriais = (com * lar * alt) * qtd
            
            $("#cubagemMateriais").val(cubagemMateriais);
            
        });
    }
.css1{width:80px;height:20px;}
.css2{width:180px;height:20px;}
.css3{width:80px;height:20px;background: #FFDDDE;}
.css4{width:100px;height:20px;background: #CAFFD8;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input name="volumeMaterial[]"      class="volumeMaterial form-control css1"      placeholder="Volume"      type="number"   value="">
    <input name="nomeMaterial[]"        class="nomeMaterial form-control css2"        placeholder="Materiais"   type="text"     value="">
    <input name="comprimentoMaterial[]" class="comprimentoMaterial form-control css1" placeholder="Comprimento" type="text"     value="">
    <input name="larguraMaterial[]"     class="larguraMaterial form-control css1"     placeholder="Largura"     type="text"     value="">
    <input name="alturaMaterial[]"      class="alturaMaterial form-control css1"      placeholder="Altura"      type="text"     value="">
        
     <input name="cubagemMateriais[]" id="cubagemMateriais" type="text" class="css3" >
    
    <hr><p>
    
     <input name="volumeMaterial[]"      class="volumeMaterial form-control css1"      placeholder="Volume"      type="number"   value="">
    <input name="nomeMaterial[]"        class="nomeMaterial form-control css2"        placeholder="Materiais"   type="text"     value="">
    <input name="comprimentoMaterial[]" class="comprimentoMaterial form-control css1" placeholder="Comprimento" type="text"     value="">
    <input name="larguraMaterial[]"     class="larguraMaterial form-control css1"     placeholder="Largura"     type="text"     value="">
    <input name="alturaMaterial[]"      class="alturaMaterial form-control css1"      placeholder="Altura"      type="text"     value="">
        
    <input name="cubagemMateriais[]" id="cubagemMateriais" type="text" class="css3" >
    
     <hr><p>
    Cubagem total: <input type="text" id="cubagemMateriaisTotal" class="css4" >

http://jsfiddle.net/xp3v2grg/4/

$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div><b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" ><hr></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

$(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);
    });
});
<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>
         
            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>
 
            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >
            
Pergunta fechada como "Precisa de detalhes ou esclarecimentos" por Andrey Hartung, Pedro Rangel, William Pereira, Marcus Vinicius, Erlon Charles
Fonte Link
Tiago
  • 2,4mil
  • 5
  • 29
  • 62

Calculo de cubagem com jquery

Olá, preciso fazer o calculo de cubagem (largura x altura x comprimento) x quantidade

O códio tem um função onde adiciona novas linhas de acordo com a necessidade. Primeiro faz o calculo de cada linha e depois faz a soma total de cada linha.

$(document).ready(function() {
        $(".alturaMaterial").mouseover(function() {
                        
            qtd = $(".volumeMaterial").val();
            com = $(".comprimentoMaterial").val();
            lar = $(".larguraMaterial").val();
            alt = $(".alturaMaterial").val();
            
            var cubagemMateriais = (com * lar * alt) * qtd
            
            $("#cubagemMateriais").val(cubagemMateriais);
            
        });
    }
.css1{width:80px;height:20px;}
.css2{width:180px;height:20px;}
.css3{width:80px;height:20px;background: #FFDDDE;}
.css4{width:100px;height:20px;background: #CAFFD8;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input name="volumeMaterial[]"      class="volumeMaterial form-control css1"      placeholder="Volume"      type="number"   value="">
    <input name="nomeMaterial[]"        class="nomeMaterial form-control css2"        placeholder="Materiais"   type="text"     value="">
    <input name="comprimentoMaterial[]" class="comprimentoMaterial form-control css1" placeholder="Comprimento" type="text"     value="">
    <input name="larguraMaterial[]"     class="larguraMaterial form-control css1"     placeholder="Largura"     type="text"     value="">
    <input name="alturaMaterial[]"      class="alturaMaterial form-control css1"      placeholder="Altura"      type="text"     value="">
        
    <input name="cubagemMateriais[]" id="cubagemMateriais" type="text" class="css3" >
    
    <hr><p>
    
    <input name="volumeMaterial[]"      class="volumeMaterial form-control css1"      placeholder="Volume"      type="number"   value="">
    <input name="nomeMaterial[]"        class="nomeMaterial form-control css2"        placeholder="Materiais"   type="text"     value="">
    <input name="comprimentoMaterial[]" class="comprimentoMaterial form-control css1" placeholder="Comprimento" type="text"     value="">
    <input name="larguraMaterial[]"     class="larguraMaterial form-control css1"     placeholder="Largura"     type="text"     value="">
    <input name="alturaMaterial[]"      class="alturaMaterial form-control css1"      placeholder="Altura"      type="text"     value="">
        
    <input name="cubagemMateriais[]" id="cubagemMateriais" type="text" class="css3" >
    
    <hr><p>
    Cubagem total: <input type="text" id="cubagemMateriaisTotal" class="css4" >