Calculation of Order for Sale jquery items

Question

I am with a problem that I am not able to solve I have a sales order screen where it has to do the quantity calculation X unitary value = (fill in the total value and add in the total order), how do I perform this calculation with jquery someone can help me follow part of the code below.

<table id="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

My jquery code looks like this, it is already calculating the values of the lines but I can not fill the total value of the line only passing over the field has some automatic way to do that when filling the quantity and the unitario value it already triggers the total of the line and sum in total?

$(window).ready(function () {
        $('#table-itens tr td.class_quant').keyup(function () {
            var quantidade = $(this).find('#qtn02').val();
            $('#table-itens tr td.class_unit').keyup(function () {
                valor_unitario = $(this).find('#valor_unitario03').val();
                var total = (quantidade * valor_unitario);
                $('#table-itens tr td.class_total').keyup(function () {
                    $(this).find('#total02').attr('value', total);
                });
            });
        });
    });

Answer 1

One way would be to monitor the number and unit value fields and when there is an action, go through all fields and calculate the values:

First, put a specific class for the quantity field, in your html the code and quantity fields are with the same class codigo.

Example:

  //Quando houver alguma ação nos campos quantidade ou valor unitario
  $('.qtd, .vlr_unitario').on('change blur keyup',function(){
    $('.qtd').each(function(){//percorre todos os campos de quantidade
      //quantidade
      var qtd = $(this).val();
      //pega o valor unitário
      var vlr = $(this).parent('td').siblings('td.class_unit').children('.vlr_unitario').val();
      // coloca o resultado no valor total
      $(this).parent('td').siblings('td').children('.total').val(qtd * vlr);
    });
    //Soma o valor total do pedido
    var total = 0;
    $('.total').each(function(){
      if($(this).val()){
        total += parseFloat($(this).val());
        $('.value_total').html(total);
      }
    });
  });
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

Note: This is a suggestion to get an idea of how to do, I have not treated the fields to test values or to make rounding.