2

Tengo una tabla dinámica, por cada fila que se va generando se crea un <input type="number" onclick="Total();" class="input-number"/>. Lo que intento hacer es que cuando el usuario aumente o disminuya la cantidad desde el input number de la fila elegida, el precio de la columna "Total" vaya cambiando. El problema que tengo es que cuando hago el click en el input number de cualquier fila ,aparece como resultado "NaN" en todas las columnas Total .

Aquí la imagen:

introducir la descripción de la imagen aquí

Aquí la tabla dinámica y jquery

<script type="text/javascript">

        function Total() {

            var price = $('.price').val();
            var quantity = $('.input-number').val();
            var result = price * quantity;
            
            $('.total').val(result);
                       
        }

    </script>
<table class="table table-striped table-primary table-bordered" id="tableComprar">

                    <thead>
                        <tr>
                            <th class="text-center">Imagen</th>
                            <th class="text-center">Nombre</th>
                            <th class="text-center">P/unidad</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        @foreach (Libro item in Model)
                        {
                            <tr>
                                <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                                <th class="text-center">@item.Nombre</th>
                                <th class="text-center"><input type="text" class="price" value="@item.Precio" disabled /></th>
                                <th class="text-center">                   
                                    <input type="number" onchange="Total(this);" class="input-number" value="" min="1" max="@item.Cantidad" placeholder="1"/>
                                </th>
                                <th class="text-center"><input type="text" class="total" value="@item.Precio" disabled /></th>                        
                            </tr>
                        }

                    </tbody>

                </table>

4
  • Prueba enlanzando el cálculo total, al evento onChange de tu input number el 20 abr. 2020 a las 17:36
  • Gracias @Paulo Urbano Rivera, lo cambie al evento onChange y me sigue apareciendo NaN.
    – Claudio
    el 20 abr. 2020 a las 17:38
  • Los esta leyendo probablemente como strings entonces prueba asi: var result = Number(price) * Number(quantity);
    – BetaM
    el 20 abr. 2020 a las 17:42
  • gracias @BetaM hice el cambio que dijiste, pero sigo obteniendo como resultado NaN en todas las columnas Total
    – Claudio
    el 20 abr. 2020 a las 17:46

3 respuestas 3

1

Mira este codigo lo hice con una función sencilla:

 <table>

 <tr>
   <th class="text-center"><img src="" width="80" height="100" /></th>
   <th class="text-center">Nombre</th>
   <th class="text-center"><input type="text" class="price" id="price1" value="10" disabled /></th>
   <th class="text-center">
     <input type="number" onclick="Total(1);" id="cant1" class="input-number" value="1" min="1" max="10" />
   </th>
   <th class="text-center"><input type="text" class="total" value="" id="tot1" disabled /></th>
 </tr>
  <tr>
   <th class="text-center"><img src="" width="80" height="100" /></th>
   <th class="text-center">Nombre 2</th>
   <th class="text-center"><input type="text" class="price" id="price2" value="10" disabled /></th>
   <th class="text-center">
     <input type="number" onclick="Total(2);" id="cant2" class="input-number" value="1" min="1" max="10" />
   </th>
   <th class="text-center"><input type="text" class="total" value="" id="tot2" disabled /></th>
 </tr>
</table>

    function Total(id){
          $("#tot"+id).val($("#cant"+id).val()*$("#price"+id).val());
    }

Lo que pasa es que estas tomando todos los inputs con clase "price", al hacer esto obtienes un array, y lo multiplicas con otro array de "cantidadades", asi que podrias generar un id por cada input.

2
  • 1
    Agrega aquí tu código amigo la plataforma soporta ejecución de html, css y js
    – BetaM
    el 20 abr. 2020 a las 18:54
  • Gracias @HERRERA bienvenido!, voy a aplicar tu forma, de todas maneras acabo de subir el html y javascript juntos para que se pueda ejecutar y ver el error.
    – Claudio
    el 20 abr. 2020 a las 19:16
1

Como te comenté, enlance el evento onChange al input-number, debido a que al momento de realizar los cambios en la cantidad estos no se reflejaban en el total.

$(document).ready(() => {
  let unit = $('#price').val()
  let quantity = $('#quantity').val()
  let total = calculate(unit, quantity)
  $('#total').val(total)
  
  $('#quantity').on('change', () => {
    unit = $('#price').val()
    quantity = $('#quantity').val()
    total = calculate(unit, quantity)
    $('#total').val(total)  
  })
  
  function calculate(price, quantity) {
    return price * quantity
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped table-primary table-bordered table-responsive">
  <thead>
    <tr>
      <th class="text-center">Imagen</th>
      <th class="text-center">Nombre</th>
      <th class="text-center">P/unidad</th>
      <th class="text-center">Cantidad</th>
      <th class="text-center">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
      <th class="text-center">@item.Nombre</th>
      <th class="text-center"><input type="text" class="price" id="price" value="22" disabled /></th>
      <th class="text-center">                   
        <input type="number" id="quantity" class="input-number" value="13" min="1" max="@item.Cantidad" placeholder="1"/>
      </th>
      <th class="text-center"><input type="text" id="total" class="total" disabled /></th>                        
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

Debes incluir un id en cada input para que puedas realizar el cálculo por fila; si lo haces por clases - como esta actualmente -, al cambiar un valor en el input-number, se actualizarán todos los totales de la tabla. Puedes concatenar un nombre genérico más el índice del elemento dentro de tu for para solucionar esto ;)

Nos comentas como te va =)

1
  • Gracias @Paulo Urbano Rivera por tu aporte!
    – Claudio
    el 20 abr. 2020 a las 22:39
0

Gracias compañeros por su aporte!!, siguiendo sus ideas lo resolví de esta manera:

1) Cree una variable contador "idRow" que me sirva como id para cada fila. a cada input le asigne un id concatenado con la idRow(logrando para cada input un id diferente).

2) Ademas en la función total() cambie al evento onchange() y le paso por parámetro el idRow.

Muestra de como quedaron los input:

<input type="text" class="price" id="price-@idRow" value="@item.Precio" disabled />
                  
<input type="number" onchange="Total(@idRow);" class="input-number" id="input-number-@idRow" value="1" min="1" max="@item.Cantidad" placeholder="1"/>

<input type="text" class="total" id="total-@idRow" value="@item.Precio" disabled />

Aca paso el código html:

@{
    Layout = "~/Views/Shared/_UsserLayout.cshtml";   
    int idRow = 0;
}

<table class="table table-striped table-primary table-bordered" id="tableComprar">

                    <thead>
                        <tr>
                            <th class="text-center">Imagen</th>
                            <th class="text-center">Nombre</th>
                            <th class="text-center">P/unidad</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach (Libro item in Model)
                        {

                            idRow++;
                            <tr>
                                <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                                <th class="text-center">@item.Nombre</th>
                                <th class="text-center"><input type="text" class="price" id="price-@idRow" value="@item.Precio" disabled /></th>
                                <th class="text-center">                   
                                    <input type="number" onchange="Total(@idRow);" class="input-number" id="input-number-@idRow" value="1" min="1" max="@item.Cantidad" placeholder="1"/>
                                </th>
                                <th class="text-center"><input type="text" class="total" id="total-@idRow" value="@item.Precio" disabled /></th>                        
                            </tr>
                        }

                    </tbody>

                </table>

Aca jquery

function Total(idRow) {
        //Hay precios que son float en la bd, para que no de errores siempre convierto a float
         
        var price = parseFloat($("#price-" + idRow).val());
        var quantity = $("#input-number-" + idRow).val();
        var result = parseFloat(price * quantity);

        $("#total-" + idRow).val(result.toFixed(2));//.toFixed(2) muestre 2 decimales despues de la coma
        
    }

Tu Respuesta

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

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