3

Tengo una tabla donde agrego productos con cantidad y precio, y cuando un producto se repite, me debe sumar la cantidad del producto que hay en la tabla más la cantidad del producto que se está agregando. Tengo un código me hace eso, pero solo cuando se repite el producto que está en la primera fila.

Entonces les pido encarecidamente que me ayuden para que cuando se repita un producto sin importar en que fila se encuentre, si es la primera fila o la última fila me sume esas cantidades.

Éste es mi código:

var cont = 0;
var total = 0;

function agregar() {

  var cantidad = $("#Cantidad").val();
  var IDInsumo = $("#idInsumo").val();
  var Precio_Compra = $("#Precio_Compra").val();
  var subtotal = Precio_Compra * cantidad;
  total = subtotal + total;
  console.info(total);
  $("#total").val(total);

  if (cont == 0) {
    cont++;
    fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td><input type="hidden" value="' + IDInsumo + '"><input type="hidden" value="' + cantidad + '"><input type="hidden" value="' + Precio_Compra + '">' + IDInsumo + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
    $('#tbodydatos').append(fila);
    return;
  }

  var id = "";
  var cantidad1 = 0;
  var precio1 = 0;
  $("#tablaDatos tbody tr").each(function(i, e) {

    var tr = $(e);
    var td = $(e).find("td").eq(1);

    id = $(td).find("input").eq(0).val();
    cantidad1 = $(td).find("input").eq(1).val();
    precio1 = $(td).find("input").eq(2).val();



    var fila = "";

    if (id == IDInsumo) {
      var tcan = parseInt(cantidad) + parseInt(cantidad1);
      var tpre = parseFloat(precio1) + parseFloat(Precio_Compra);

      tr.remove();
      cont++;
      fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td><input type="hidden" value="' + IDInsumo + '"><input type="hidden" value="' + tcan + '"><input type="hidden" value="' + tpre + '">' + IDInsumo + '</td><td>' + tcan + '</td><td>' + tpre + '</td></tr>';
      $('#tbodydatos').append(fila);
      reordenar();
      return false;
    } else {
      cont++;
      fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td><input type="hidden" value="' + IDInsumo + '"><input type="hidden" value="' + cantidad + '"><input type="hidden" value="' + Precio_Compra + '">' + IDInsumo + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
      $('#tbodydatos').append(fila);
      reordenar();
      return false;
    }
  })
}

function reordenar() {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="idInsumo" placeholder="Insumo" />
<input type="text" id="Cantidad" placeholder="Cantidad" />
<input type="text" id="Precio_Compra" placeholder="Precio de Compra" />
<button onclick="agregar()">Agregar fila</button>

<hr/>

<table id="tablaDatos" class="table table-bordered">
  <thead>
    <tr>
      <td>Numero del Insumo</td>
      <td>Insumo</td>
      <td>Cantidad</td>
      <td>Subtotal</td>
    </tr>
  </thead>
  <tbody id="tbodydatos"></tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
      <td><input type="text" id="total" disabled /></td>
    </tr>
  </tfoot>
</table>

3
  • 2
    Mirando tu código, voy a arriesgarme a decirte que el problema es que tienes IDs repetidos en cada fila (al menos idInsumo), entonces al hacer $("#idInsumo").val() sólo obtienes el de la primera fila y por eso sólo funciona para esa fila. Añade un ejemplo de tu tabla en HTML para que podamos ver mejor por qué falla.
    – Alvaro Montoro
    Commented el 26 may. 2017 a las 14:43
  • hola, gracias por responder, mi tabla HTML es esta:<table id="tablaDatos" class="table table-bordered"> <thead> <tr> <td>Numero del Insumo</td> <td>Insumo</td> <td>Cantidad</td> <td>Subtotal</td> </tr> </thead> <tbody id="tbodydatos"></tbody> </table> Commented el 28 may. 2017 a las 5:59
  • He creado un ejemplo mínimo verificable y lo he añadido a la publicación para que sea más fácil encontrar la solución. Me he tenido que inventar algunas cosas porque le faltaban datos a la pregunta, pero creo que en general está bien porque se puede reproducir el problema. Si ves que hay algo que no debería ser así, edita la pregunta y ponlo correctamente.
    – Alvaro Montoro
    Commented el 28 may. 2017 a las 11:55

1 respuesta 1

1

El problema está en el each y las condiciones que pones dentro. Lo que haces es lo siguiente:

  1. Para cada fila de la tabla:
    1. Si el ID coincide:
      1. Crea una fila con los valores sumados
      2. Destruye la fila original
      3. Incluye la nueva fila en la tabla
      4. Termina la ejecución del bucle
    2. Si el ID no coincide
      1. Crea una fila con los valores nuevos
      2. Incluye la nueva fila en la tabla
      3. Termina la ejecución del bucle
    3. Pasa al siguiente elemento

El problema está en que aunque tengas el ID en la tabla, si éste no aparece en la primera fila, el ID con el que se compara (el de la primera fila en 1.1) nunca va a coincidir con el del input escondido, siempre va a irse por el else (1.2), se va a crear una nueva fila y se va a parar la ejecución del bucle (con el return false que sería 1.2.3) por lo que nunca se llegará a la fila en la que coinciden IDs. (Espero haberme explicado bien)

Eso lo puedes solucionar haciendo que no haya un else y reordenando un poco el código. De este modo, harás que no se repita (DRY!) y será más fácil de mantener. Esta solución se basa en que realmente, si no se ha encontrado una fila que coincida, el comportamiento es similar a si no hubiera ninguna fila directamente (sin el reordenar(), que se le puede añadir).

La idea sería la siguiente:

  1. Mueve el código que comprueba si sólo hay un elemento y añade una fila al final.
  2. Añade el reordenar al código del paso 1.
  3. Quita el else de dentro del bucle.
  4. Añade una variable que indique si se ha encontrado una fila y se ha producido la suma.
  5. Si no se ha producido dicha coincidencia: ejecuta el código del paso 1.

El código modificado (con comentarios para ilustrar los cambios de arriba):

var cont = 0;
var total = 0;

function agregar() {

  var cantidad = $("#Cantidad").val();
  var IDInsumo = $("#idInsumo").val();
  var Precio_Compra = $("#Precio_Compra").val();
  var subtotal = Precio_Compra * cantidad;
  total = subtotal + total;
  console.info(total);
  $("#total").val(total);

  // quitar la inserción de aquí y mover abajo

  var id = "";
  var cantidad1 = 0;
  var precio1 = 0;
  
  // variable para indicar si se añadió fila en el bucle
  var encontrado = false;

  $("#tablaDatos tbody tr").each(function(i, e) {
    var tr = $(e);
    var td = $(e).find("td").eq(1);

    id = $(td).find("input").eq(0).val();
    cantidad1 = $(td).find("input").eq(1).val();
    precio1 = $(td).find("input").eq(2).val();

    var fila = "";

    if (id == IDInsumo) {
      // si se encontró un ID: encontrado!
      encontrado = true;
      
      var tcan = parseInt(cantidad) + parseInt(cantidad1);
      var tpre = parseFloat(precio1) + parseFloat(Precio_Compra);

      tr.remove();
      cont++;
      fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td><input type="hidden" value="' + IDInsumo + '"><input type="hidden" value="' + tcan + '"><input type="hidden" value="' + tpre + '">' + IDInsumo + '</td><td>' + tcan + '</td><td>' + tpre + '</td></tr>';
      $('#tbodydatos').append(fila);
      reordenar();
      return false;
    }
  });
  
  // si es el primer elemento o no se encontró ID, se añade una neuva fila
  // código de arriba movido aquí cambiando un poco la condición
  // realmente el `cont == 0` ya no hace falta, porque si la tabla está vacía encontrado será false
  if (cont == 0 || !encontrado) {
    cont++;
    fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td><input type="hidden" value="' + IDInsumo + '"><input type="hidden" value="' + cantidad + '"><input type="hidden" value="' + Precio_Compra + '">' + IDInsumo + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
    $('#tbodydatos').append(fila);
    // tenemos que reordenar
    reordenar();
    return;
  }
}

function reordenar() {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="idInsumo" placeholder="Insumo" />
<input type="text" id="Cantidad" placeholder="Cantidad" />
<input type="text" id="Precio_Compra" placeholder="Precio de Compra" />
<button onclick="agregar()">Agregar fila</button>

<hr/>

<table id="tablaDatos" class="table table-bordered">
  <thead>
    <tr>
      <td>Numero del Insumo</td>
      <td>Insumo</td>
      <td>Cantidad</td>
      <td>Subtotal</td>
    </tr>
  </thead>
  <tbody id="tbodydatos"></tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
      <td><input type="text" id="total" disabled /></td>
    </tr>
  </tfoot>
</table>

1
  • Muy buena solución, muchas gracias por colaborarme Commented el 29 may. 2017 a las 17:57

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.