Addition and Subtraction of the 'tr' in a table with JQuery

Navigation
0

Hi, I am trying to add the tr of my detail table, as well as subtract when I click on the tachito icon.

I'm trying with a for and it does not work for me

THIS IS MY HTML TABLE 

<div class="col-xs-7">
     <table id="table_ventas"
        class="table table-bordered table-condensed table-hover responsive"
            cellspacing="0" width="100%">
             <thead>
               <tr>
                  <th><FONT SIZE=4>#</FONT></th>
                  <th><FONT SIZE=4>Código</FONT></th>
                  <th width="320px"><FONT SIZE=4>Producto</FONT></th>
                  <th><FONT SIZE=4>Precio</FONT></th>
                  <th><FONT SIZE=4>Cantidad</FONT></th>
                  <th><FONT SIZE=4>Subtotal</FONT></th>
                  <th width="5%"></th>
                </tr>
              </thead>
              <tbody>
              </tbody>
             </table>
       <div class="row">
         <div align="center" id="modal_footer">
                 <table id="table_total"
            class="table table-bordered table-condensed table-hover responsive"
               cellspacing="0" width="100%">
           <thead>
              <tr>
              <td id="total_fila" style="text-align: right;"><strong><FONT SIZE=6>TOTAL : s./ </FONT></strong></th>
                <td id="detalle_total"><strong><FONT color="#1b5e20" SIZE=6> 0 </FONT><th>  
           </tr>
           </thead>
           </table>
            <div align="center">
       <button type="button" id="btnSave" onclick="cancelar_venta()"
     class="btn btn-danger btn-lg"><i class="fa fa-remove"></i> CANCELAR COMPRA</button>
    </div>
    </div>
    </div>
    </div>

THIS IS MY ADD BUTTON: 

$("#confirmar_producto").click(function () {
    /* Capturar los valores de los campos */
    var id_producto = $('#id_producto').val();
    var cod_producto = $('#cod_producto').val();
    var precio = $('#precio').val();
    var cantidad = $('#cantidad_comprar').val();
    var producto = $("#producto").text();
    var subtotal = precio * cantidad;
    /* Crear una fila nueva con los datos capturados */
    var cont_fila = ($('#table_ventas tbody').find('tr').length) + 1;
    var fila = '<tr>';
    fila = fila + '<td scope="row">' + cont_fila + '</td>';
    fila = fila + '<td><input type="hidden" id="id_producto_tabla" value="' + id_producto + '"><input type="text" class="form-control text-center" id="Codigo_' + cont_fila + '" value="' + cod_producto + '" readonly="readonly" /></td>';//Codigo
    fila = fila + '<td><input type="text" class="form-control text-center" id="Producto_' + cont_fila + '" value="' + producto + '" readonly="readonly" /></td>';//Producto
    fila = fila + '<td><input type="text" class="form-control text-center" id="Precio_' + cont_fila + '" value="' + precio + '" readonly="readonly" /></td>';//Precio
    fila = fila + '<td><input type="text" class="form-control text-center" id="Cantidad_' + cont_fila + '" value="' + cantidad + '" readonly="readonly" /></td>';//Cantidad
    fila = fila + '<td><input type="text" class="form-control text-center" id="Subtotal_' + cont_fila + '" value="' + subtotal + '" readonly="readonly" /></td>';//Subtotal
    fila = fila + '<td><a href="javascript:void(0);" class="eliminar_fila" onclick="eliminar_detalle(this,' + cont_fila + ');"><i class="fa fa-trash-o fa-2x"></i></a></td>';//Eliminar
    fila = fila + '</tr>';
    /* Agregar las futuras filas */
    $("#table_ventas").append(fila);
    /* Despues de agregar limpiar los inputs*/
    limpiar();
    suma_total();
});

THIS IS MY JQUERY CODE: 

function suma_total() {

    var cont_fila = ($('#table_ventas tbody').find('tr').length);
    var total_general = 0;
    for (var i = 1; i < cont_fila; i++) {
        var subtotal = $('#Subtotal_' + cont_fila).val();
        total_general = parseFloat(total_general) + parseFloat(subtotal);
    }
    $("#detalle_total").text((total_general * 1).toFixed(2));

}

function resta_total() {

    //Aqui deberia ir el otro codigo pero como aun no avanzo con el primero :c

}
    
asked by Ivan More Flores 13.06.2017 в 18:58
source

2 answers

1

would be easier if you add a class to your subtotal, for example: 

class="form-control text-center subtotal"

then you only use each to iterate 

$('.subtotal').each(function() {
        sum += Number($(this).val());
    });


function agregar(){
    var i = $("#agregar").val()
    $('#autollenado').append('<tr><td><input type="text" class="form-control text-center subtotal" id="Subtotal_' + i + '" value="' + i + '" readonly="readonly" /></td></tr>');
    sumar();
}

function sumar(){
    var sum=0;
    $('.subtotal').each(function() {
        sum += Number($(this).val());
    });
    $('#suma').html(sum)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control agregar" id="agregar" />
<button onClick='agregar();'> agregar</button>
<table id="autollenado"></table>
<p id='suma'></p>
    
answered by 13.06.2017 / 19:18
source
1

You have two problems:

  • The for is missing add the last element you should be up to cont_fila
  • When searching for the subtotal value is i no cont_fila

Fixed code: 

function suma_total() {

  var cont_fila = ($('#table_ventas tbody').find('tr').length);
  var total_general = 0;
  for (var i = 1; i <= cont_fila; i++) {
      var subtotal = $('#Subtotal_' + i).val();
      total_general = parseFloat(total_general) + parseFloat(subtotal);
  }
  $("#detalle_total").text((total_general * 1).toFixed(2));

}
    
answered by 13.06.2017 в 19:19
Problem with num_rows Print the result of an AJAX query in an input text