1

Hola estoy tratando de Remover una fila de una tabla, lo remuevo visualmente, el código funciona todo bien pero tengo una función que es sumar. Esta función se dispara cada vez que el doy en el botón agregar,todo va bien si remuevo la ultima fila pero si remuevo la que esta arriba o cualquier otra me sale como total "NaN" espero me puedan ayduar. Gracias.

introducir la descripción de la imagen aquí

CODIGO HTML :

<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>

CODIGO DEL BOTON AGREGAR

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

CODIGO DE LA FUNCION SUMAR

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").html("<strong><FONT color='#1b5e20' SIZE=6> " + (total_general * 1).toFixed(2) + " </FONT>");
}

CODGIO DE ELIMINAR

function eliminar_detalle(e, index) {

    $(e).parent().parent().remove();
    suma_total();

}
4
  • si en lugar de $(e).parent().parent().remove(); usas $(e).closest( "tr" ).remove(); Commented el 13 jun. 2017 a las 20:17
  • Si tuviera una demo real de lo que está pasando sería más fácil ayudarte. Pero pruebe esto: intercambie el $("#confirmar_producto").click(function () { para eso $(document).on( "click", "#confirmar_producto", function() {
    – Chun
    Commented el 13 jun. 2017 a las 22:43
  • Y vuelve decir si funciona. Si funcionó, yo puedo crear una respuesta adecuada a su pregunta explicando por qué funcionó.
    – Chun
    Commented el 13 jun. 2017 a las 22:47
  • Lo ise de otra forma igual gracias (Y) Commented el 14 jun. 2017 a las 16:56

2 respuestas 2

0

El problema es la variable cont_fila, que se basa en el total de filas + 1.

Supongamos que tienes 3 filas, entonces:

  • Los id de los input para la 1er fila usan el 1
  • Los id de los input para la 2da fila usan el 2
  • Los id de los input para la 3ra fila usan el 3

Supongamos que borras la 1er fila, al intentar sumar.

Vas buscar el $('#Subtotal_1').val(), pero este elemento ya no existe, por lo que el resultado devuelto es undefined y es por eso que luego obtienes como total NaN.

Solución:

Modificar la función que agrega filas, para que los input dejen de usar id para identificarlos y en su lugar usen name.

$("#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" name="id_producto_tabla" value="' + id_producto + '"><input type="text" class="form-control text-center" name="Codigo" value="' + cod_producto + '" readonly="readonly" /></td>';//Codigo
    fila = fila + '<td><input type="text" class="form-control text-center" name="Producto" value="' + producto + '" readonly="readonly" /></td>';//Producto
    fila = fila + '<td><input type="text" class="form-control text-center" name="Precio" value="' + precio + '" readonly="readonly" /></td>';//Precio
    fila = fila + '<td><input type="text" class="form-control text-center" name="Cantidad" value="' + cantidad + '" readonly="readonly" /></td>';//Cantidad
    fila = fila + '<td><input type="text" class="form-control text-center" name="Subtotal" value="' + subtotal + '" readonly="readonly" /></td>';//Subtotal
    fila = fila + '<td><a href="javascript:void(0);" class="eliminar_fila" onclick="eliminar_detalle(this);"><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();
});

Luego modificar la función suma_total para que busque los input por su name.

function suma_total() {
  var $trs = $('#table_ventas tbody').children();
  var cont_fila = $trs.length;
  var total_general = 0;

  for (var i = 0; i < cont_fila; i++) {

    var subtotal = $trs.eq(i).find('input[name="Subtotal"]').val();
    total_general += parseFloat(subtotal);
  }
  $("#detalle_total").html("<strong><FONT color='#1b5e20' SIZE=6> " + (total_general * 1).toFixed(2) + " </FONT>");
}
2
  • Alguna solución sin modificar el código ya que a la hora de guardarlo no sabría como hacerlo :s Commented el 13 jun. 2017 a las 21:08
  • @IvanMoreFlores, en lugar de eliminar las filas, podrías ocultarlas y en base a esta condición evaluar si sumarlas/guardarlas/etc o no. De todas formas modificar el script para guardarlas debería ser similar al de sumarlas (buscar las inputs por su name)
    – Marcos
    Commented el 13 jun. 2017 a las 21:12
0

Tu for está mal, tienes i <= cont_fila y debe de ser i < cont_fila recuerda que los arreglos son base 0, si tienes 4 TR van del 0 al 3 y al querer leer el valor de un row que no existe tendras un undefined.

function suma_total() {

var cont_fila = ($('#table_ventas tbody').find('tr').length); //Tienes el TOTAL de TR
var total_general = 0;
//Tienes que ser i < cont_fila
for (var i = 1; i <= cont_fila; i++) {
    var subtotal = $('#Subtotal_' + i).val(); //la ultima iteración será undefined
    //Tienes que validar que exista subtotal 
    total_general = parseFloat(total_general) + parseFloat(subtotal);
    }
$("#detalle_total").html("<strong><FONT color='#1b5e20' SIZE=6> " + (total_general * 1).toFixed(2) + " </FONT>");
}

Prueba con esto

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();
    if(subtotal)
        total_general = parseFloat(total_general) + parseFloat(subtotal);
    }
$("#detalle_total").html("<strong><FONT color='#1b5e20' SIZE=6> " + (total_general * 1).toFixed(2) + " </FONT>");
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.