javascript - Total table column with jquery function -
i have found on site jquery function updating table row. need total column. anybody? i,m not familiar jquery , tried lot of things don't working.
fiddle: http://jsfiddle.net/heliosh/r7dvay4o/
js
$(document).ready(function () { function updatearticle1() { var persons = parsefloat($("#dare_price1").val()); var total = (persons) * 2.00; var total = total.tofixed(2); $("#total_price_amount1").val(total); } $(document).on("change, keyup", "#dare_price1", updatearticle1); }); $(document).ready(function () { function updatearticle2() { var animals = parsefloat($("#dare_price2").val()); var total = (animals) * 3.50; var total = total.tofixed(2); $("#total_price_amount2").val(total); } $(document).on("change, keyup", "#dare_price2", updatearticle2); }); $(document).ready(function () { function updatearticle3() { var bedlinen = parsefloat($("#dare_price3").val()); var total = (bedlinen) * 8.50; var total = total.tofixed(2); $("#total_price_amount3").val(total); } $(document).on("change, keyup", "#dare_price3", updatearticle3); }); $(document).ready(function () { function updatearticle4() { var towels = parsefloat($("#dare_price4").val()); var total = (towels) * 7.50; var total = total.tofixed(2); $("#total_price_amount4").val(total); } $(document).on("change, keyup", "#dare_price4", updatearticle4); }); html
<table> <tr> <td>persons?</td> <td> <input class="span4 input-big" id="dare_price1" name="persons" value="" size="30" type="text" /> </td> </tr> <tr> <td>animals?</td> <td> <input class="span4 input-big" id="dare_price2" name="animals" value="" size="30" type="text" /> </td> </tr> <tr> <td>bedlinen?</td> <td> <input class="span4 input-big" id="dare_price3" name="bedlinen" value="" size="30" type="text" /> </td> </tr> <tr> <td>towels?</td> <td> <input class="span4 input-big" id="dare_price4" name="towels" value="" size="30" type="text" /> </td> </tr> </table> <table style="width: 50%"> <tr> <td style="width: 403px"></td> <td></td> </tr> <tr> <td style="width: 403px">rentalprice</td> <td>189.00</td> <td>euro</td> </tr> <tr> <td style="width: 403px">taxes</td> <td style="width: 50px"> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="pricepersons" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">animals</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="priceanimals" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">bedlinen</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="pricebedlinen" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">towels</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="pricetowels" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px">total</td> <td> </td> <td>euro</td> </tr> </table>
here updated fiddle.
i calculates grand total of items.
here snippet.
$(document).ready(function() { function updatearticle1() { var persons = parsefloat($("#dare_price1").val()); var total = (persons) * 2.00; var total = total.tofixed(2); if (isnan(total)) total = 0; $("#total_price_amount1").val(total); } function updatearticle2() { var animals = parsefloat($("#dare_price2").val()); var total = (animals) * 3.50; var total = total.tofixed(2); if (isnan(total)) total = 0; $("#total_price_amount2").val(total); } function updatearticle3() { var bedlinen = parsefloat($("#dare_price3").val()); var total = (bedlinen) * 8.50; var total = total.tofixed(2); if (isnan(total)) total = 0; $("#total_price_amount3").val(total); } function updatearticle4() { var towels = parsefloat($("#dare_price4").val()); var total = (towels) * 7.50; var total = total.tofixed(2); if (isnan(total)) total = 0; $("#total_price_amount4").val(total); } function updatetotal() { var price1 = parsefloat($("#total_price_amount1").val()); var price2 = parsefloat($("#total_price_amount2").val()); var price3 = parsefloat($("#total_price_amount3").val()); var price4 = parsefloat($("#total_price_amount4").val()); var total = price1 + price2 + price3 + price4; if (isnan(total)) total = 0; $("#totalsum").text(total); } $(document).on("change, keyup", "#dare_price1", updatearticle1); $(document).on("change, keyup", "#dare_price2", updatearticle2); $(document).on("change, keyup", "#dare_price3", updatearticle3); $(document).on("change, keyup", "#dare_price4", updatearticle4); $(document).on("click", "#gettotal", updatetotal); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <table> <tr> <td>persons?</td> <td> <input class="span4 input-big" id="dare_price1" name="persons" value="" size="30" type="text" /> </td> </tr> <tr> <td>animals?</td> <td> <input class="span4 input-big" id="dare_price2" name="animals" value="" size="30" type="text" /> </td> </tr> <tr> <td>bedlinen?</td> <td> <input class="span4 input-big" id="dare_price3" name="bedlinen" value="" size="30" type="text" /> </td> </tr> <tr> <td>towels?</td> <td> <input class="span4 input-big" id="dare_price4" name="towels" value="" size="30" type="text" /> </td> </tr> </table> <table style="width: 50%"> <tr> <td style="width: 403px"></td> <td></td> </tr> <tr> <td style="width: 403px">rentalprice</td> <td>189.00</td> <td>euro</td> </tr> <tr> <td style="width: 403px">taxes</td> <td style="width: 50px"> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="pricepersons" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">animals</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="priceanimals" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">bedlinen</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="pricebedlinen" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px"><span lang="nl">towels</span> </td> <td> <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="pricetowels" value="" /> </td> <td>euro</td> </tr> <tr> <td style="width: 403px">total</td> <td id="totalsum"> </td> <td>euro</td> </tr> </table> <input id="gettotal" type="button" value="get total" />this code can further optimized replacing 4 functions replacearticle1(), replacearticle2(), replacearticle3(), replacearticle4() single function replacearticle() , updating respective elements using ids.
Comments
Post a Comment