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:
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>
onChange
de tu input numbervar result = Number(price) * Number(quantity);