Calculate total price in table row
Calcula la operación de un valor multiplicado por la cantidad elegida, cambia al elegir una nueva cantidad.
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Papas fritas</td>
<td>12.80</td>
<td class='cantidad'></td>
<td></td>
</tr>
<tr>
<td>Jabón</td>
<td>17</td>
<td class='cantidad'></td>
<td></td>
</tr>
</tbody>
</table>
JavaScript
/* Genera un SELECT con cantidades */
var quantySelect = "<select>";
for(var i = 1; i < 11; i+=1){
quantySelect += '<option value="' + i + '">'+ i +'</value>';
}
quantySelect += '</select>';
$(document).ready(function(){
$('.cantidad').html(quantySelect);
/*
* CALCULAMOS EL VALOR DEL PRECIO POR LA CANTIDAD
* Estudiar el traversing con Jquery para este ejemplo
*/
$('.cantidad').on("change", "select", function(){
var textoPrecio = $(this).parent().prev().text();
var textoCantidad = $(this).val();
var precio = parseFloat(textoPrecio);
var cantidad = parseInt(textoCantidad);
var subtotal = precio * cantidad;
//Texto del subtotal
$(this).parent().next().text(subtotal.toFixed(2));
});
});