Quiero crear una tabla con un precio fijo, un campo de entrada donde alguien pueda ingresar un valor y una columna con el total (precio * cantidad)
El problema que tengo es que el código que escribí funciona pero solo con números enteros. no se lee después de la coma. Entonces, si ingreso un precio de 4.39, se calcula con 4.
Además, si configuro el tipo en "decimal" o "número", no funciona.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> <script type="text/javascript"> $(function () { $('.price,.quantity').on('keyup', function () { var row = $(this).closest('tr'); var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val(); var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val(); $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity)); }); }); </script> </head> <body> <div> <table> <tr> <th>Name</th> <th>Price</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td>Chai</td> <td><input type="text" class="price" value="1.39" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" /></td> </tr> <tr> <td>Chang</td> <td><input type="text" class="price" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" /></td> </tr> <tr> <td>Aniseed Syrup</td> <td><input type="text" class="price" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" /></td> </tr> </table> </div> </body> </html>Puede agregar un atributo de readonly a sus input fields para que non-editable .
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> <script type="text/javascript"> $(function () { $('.price,.quantity').on('keyup', function () { var row = $(this).closest('tr'); var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val(); var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val(); $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity)); }); }); </script> </head> <body> <div> <table> <tr> <th>Name</th> <th>Price</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td>Chai</td> <td><input type="text" class="price" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" readonly/></td> </tr> <tr> <td>Chang</td> <td><input type="text" class="price" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" readonly/></td> </tr> <tr> <td>Aniseed Syrup</td> <td><input type="text" class="price" /></td> <td><input type="text" class="quantity" /></td> <td><input type="text" class="total" readonly/></td> </tr> </table> </div> </body> </html>