0

$(document).ready(function() {
  //obtenemos el valor de los input
  $('#boton_agregar').click(function() {
    var id = document.getElementById("txt_idServ").value;
    var servicio = document.getElementById("txt_servicio").value;
    var costo = document.getElementById("txt_costo").value;
    var cantidad = document.getElementById("cantidad").value;
    var subTotal = document.getElementById("subTotal").value;
    var i = 0; //contador para asignar id al boton que borrara la fila
    if (cantidad.length == '') {
      swal("Error", "Ingrese un Servicio y cantidad!", "error");
      return;
    }
    var fila = '<tr id="row' + i + '"><td><input name="id_servicio[]" class="form-control"style="width:55px;" \n\
            readonly value="' + id + '"/></td><td>' + servicio + '</td><td>' + costo + '</td>\n\
            <td>' + cantidad + '</td><td><input class="form-control" style="width:65px;" readonly\n\
             id="subTotal_' + id + '" value="' + subTotal + '" /> \n\
            </td><td><button type="button" name="remove" id="' + i + '" \n\
            class="btn btn-outline-danger btn_remove" title="Quitar">\n\
            \n\Quitar</button></td></tr>'; //esto seria lo que contendria la fila
    i++;
    $('#listaservicios tr:last').after(fila);
    $("#adicionados").text(""); //esta instruccion limpia el div adicioandos para que no se vayan acumulando
    var nFilas = $("#listaservicios tr").length;
    $("#adicionados").append(nFilas - 1);
    //le resto 1 para no contar la fila del header
    document.getElementById("txt_idServ").value = "";
    document.getElementById("txt_servicio").value = "";
    document.getElementById("txt_costo").value = "";
    document.getElementById("cantidad").value = "";
    document.getElementById("subTotal").value = "";
  });
  $(document).on('click', '.btn_remove', function() {
    $(this).closest('#listaservicios tr').remove();
    $("#adicionados").text("");
    var nFilas = $("#listaservicios tr").length;
    $("#adicionados").append(nFilas - 1);
  });
});
//multiplica el costo por cantidad y me devuelve en el input subtotal
function multiplicar() {
  try {
    var a = parseFloat(document.getElementById("txt_costo").value) || 0,
      b = parseFloat(document.getElementById("cantidad").value) || 0;
    document.getElementById("subTotal").value = a * b;
  } catch (e) {}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table id="AddServicios" class="table table-sm">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Servicio</th>
      <th scope="col">Costo</th>
      <th scope="col">Cantidad</th>
      <th scope="col">SubTotal</th>
      <th scope="col">Acción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control col-lg-5" id="txt_idServ" data-name="s" disabled></td>
      <td><input type="text" class="form-control col-lg-8" id="txt_servicio" data-name="s"></td>
      <td><input type="text" oninput="multiplicar()" class="form-control col-lg-5" id="txt_costo" data-name="s" ></td>
      <td><input type="number" oninput="multiplicar()" class="form-control col-lg-5" id="cantidad" data-name="s"></td>
      <td><input class="form-control col-lg-6" id="subTotal" data-name="s"  type="number"></td>
      <td><button type="button" class=" form-control btn btn-outline-success " id="boton_agregar" title="Agregar">
                                            Agregar
                                        </button>
      </td>
    </tr>
  </tbody>
</table>
<label>Servicios Relaizados: </label>
<div id="adicionados"></div>
<table id="listaservicios" class="table table-sm">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Servicio</th>
      <th scope="col">Costo</th>
      <th scope="col">Cantidad</th>
      <th scope="col">SubTotal</th>
      <th scope="col">Acción</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>
<div class="col-md-2">
  <input placeholder="Total" name="total" style="width:150px;" class="form-control" id="Total" data-name="s" readonly type="text">
</div>

<div class="form-row">
  <label class="is-required">Observación</label>
  <textarea name="observacion" class="form-control margin-button" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-primary ">Registrar</button>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

He estado investigando cómo puedo sumar una columna pero no logro implementarlo en mi código y también quisiera que al eliminar una fila me pueda restar lo que tenía y que el total me lo asigne al input total. Les dejo mi codigo compilado para que me puedan ayudar por favor. Imagen de referencia:

Imagen de mi interfaz

Este es mi código JavaScript en el que agrego las filas y multiplico el total por la cantidad para obtener el subtotal. Y esta es mi tabla donde se agregan las filas.

En la parte de agregar saco los registros de la base de datos y los asigno a los inputs.

2
  • Hola estimado, tienes que poner tu código, de esta forma podremos ayudarte. Commented el 4 dic. 2020 a las 22:05
  • Estimado ya lo puse todo el codigo, lo puede probar por favor Commented el 4 dic. 2020 a las 23:11

1 respuesta 1

0

Espero te sea de utilidad; puse ++++++++++++++ donde se realizo cambio o comentario de mi aportación a tu código.

$(document).ready(function() {
  //obtenemos el valor de los input
  $('#boton_agregar').click(function() {
    var id = document.getElementById("txt_idServ").value;
    var servicio = document.getElementById("txt_servicio").value;
    var costo = document.getElementById("txt_costo").value;
    var cantidad = document.getElementById("cantidad").value;
    var subTotal = document.getElementById("subTotal").value;
    var i = 0; //contador para asignar id al boton que borrara la fila
    if (cantidad.length == '') {
      swal("Error", "Ingrese un Servicio y cantidad!", "error");
      return;
    }
    var fila = '<tr id="row' + i + '"><td><input name="id_servicio[]" class="form-control"style="width:55px;" \n\
            readonly value="' + id + '"/></td><td>' + servicio + '</td><td>' + costo + '</td>\n\
            <td>' + cantidad + '</td><td><input class="form-control elSubTotal" style="width:65px;" readonly\n\
             id="subTotal_' + id + '" value="' + subTotal + '" /> \n\
            </td><td><button type="button" name="remove" id="' + i + '" \n\
            class="btn btn-outline-danger btn_remove" title="Quitar">\n\
            \n\Quitar</button></td></tr>'; //esto seria lo que contendria la fila
            //  ++++++++++++++ Mira en class del input que corresponde al SubTotal
    i++;
    $('#listaservicios tr:last').after(fila);
    $("#adicionados").text(""); //esta instruccion limpia el div adicioandos para que no se vayan acumulando
    var nFilas = $("#listaservicios tr").length;
    $("#adicionados").append(nFilas - 1);
    //le resto 1 para no contar la fila del header
    document.getElementById("txt_idServ").value = "";
    document.getElementById("txt_servicio").value = "";
    document.getElementById("txt_costo").value = "";
    document.getElementById("cantidad").value = "";
    document.getElementById("subTotal").value = "";
    
    // ++++++++++++++ Llamamos la función para calcular de nuevo
    actualizarTotal();
    
  });
  $(document).on('click', '.btn_remove', function() {
    $(this).closest('#listaservicios tr').remove();
    $("#adicionados").text("");
    var nFilas = $("#listaservicios tr").length;
    $("#adicionados").append(nFilas - 1);
    // ++++++++++++++ Llamamos la función para calcular de nuevo
    actualizarTotal();
  });
});
//multiplica el costo por cantidad y me devuelve en el input subtotal
function multiplicar() {
  try {
    var a = parseFloat(document.getElementById("txt_costo").value) || 0,
      b = parseFloat(document.getElementById("cantidad").value) || 0;
    document.getElementById("subTotal").value = a * b;
  } catch (e) {}
}


// ++++++++++++++ Agregado Actualizar
function actualizarTotal() {
  // Se considera la columan Subtotal para la sumatoria.
  // PAra ello, a la propiedad class de los input que corresponden a SubTotal le puse "elSubTotal" (aún que no es clase, ni esta declarada)
  // Usando jQuery
  var sumatoria=0;
  $('#Total').val(sumatoria); // Establecemos a Cero el SubTotal
  
  // Buscamos todos los SubTotales por medio de su "clases" :D
  $.each($('.elSubTotal'), function ( i, val ) {
    sumatoria+=Number($(this).val()); // Se asume todos son número valido
  });
  
  $('#Total').val(sumatoria); // Colocamos el valor final
  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table id="AddServicios" class="table table-sm">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Servicio</th>
      <th scope="col">Costo</th>
      <th scope="col">Cantidad</th>
      <th scope="col">SubTotal</th>
      <th scope="col">Acción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control col-lg-5" id="txt_idServ" data-name="s" disabled></td>
      <td><input type="text" class="form-control col-lg-8" id="txt_servicio" data-name="s"></td>
      <td><input type="text" oninput="multiplicar()" class="form-control col-lg-5" id="txt_costo" data-name="s" ></td>
      <td><input type="number" oninput="multiplicar()" class="form-control col-lg-5" id="cantidad" data-name="s"></td>
      <td><input class="form-control col-lg-6" id="subTotal" data-name="s"  type="number"></td>
      <td><button type="button" class=" form-control btn btn-outline-success " id="boton_agregar" title="Agregar">
                                            Agregar
                                        </button>
      </td>
    </tr>
  </tbody>
</table>
<label>Servicios Relaizados: </label>
<div id="adicionados"></div>
<table id="listaservicios" class="table table-sm">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Servicio</th>
      <th scope="col">Costo</th>
      <th scope="col">Cantidad</th>
      <th scope="col">SubTotal</th>
      <th scope="col">Acción</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>
<div class="col-md-2">
  <input placeholder="Total" name="total" style="width:150px;" class="form-control" id="Total" data-name="s" readonly type="text">
</div>

<div class="form-row">
  <label class="is-required">Observación</label>
  <textarea name="observacion" class="form-control margin-button" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-primary ">Registrar</button>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

1
  • Es justo lo que estaba buscando amigo, muchas gracias Commented el 4 dic. 2020 a las 23:46

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.