如何总结Jquery输出

Question

I created couple of rows and multiplied some data to get totals:

But I am not sure how to sum all the totals and print it in "Cash in Hand" row.

Following are my codes:

 <script type="text/javascript"> $(document).ready(function() { $('.row1').keyup(function(ev){ var row1c = $(this).val() * 1000; $('.row1c').html((row1c).toFixed(2)); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.row2').keyup(function(ev){ var row2c = $(this).val() * 500; $('.row2c').html((row2c).toFixed(2)); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.row3').keyup(function(ev){ var row3c = $(this).val() * 100; $('.row3c').html((row3c).toFixed(2)); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.row4').keyup(function(ev){ var row4c = $(this).val() * 50; $('.row4c').html((row4c).toFixed(2)); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.row5').keyup(function(ev){ var row5c = (row1c+row2c+row3c+row4c); $('.row5c').html((row5c).toFixed(2)); }); }); </script> 

 <table border="2" cellpadding="5" cellspacing="2" align="center"> <h3 align="center">Cash Position as on...... </h3> <tr> <th>Note</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td>1000 Tk Note</td> <td><input type="text" name="pages" class="row1" /></td> <td><span class="row1c">0.00</span></td> </tr> <tr> <td>500 Tk Note</td> <td><input type="text" name="pages" class="row2" /></td> <td><span class="row2c">0.00</span></td> </tr> <tr> <td>100 Tk Note</td> <td><input type="text" name="pages" class="row3" /></td> <td><span class="row3c">0.00</span></td> </tr> <tr> <td>50 Tk Note</td> <td><input type="text" name="pages" class="row4" /></td> <td><span class="row4c">0.00</span></td> </tr> <tr> <td colspan ="2">Cash In Hand (Sum of All Totals)</td> <td><span class="row5c">0.00</span></td> </tr> </table> 

All codes together here:

https://jsfiddle.net/rashelmiah/fb9opo36/1/

Could you please me find a way to sum all the totals? Thanks in advance.

Answer 1

You need add the following code.

$('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total);
})

Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.

Demo:

 $(document).ready(function() { $('.row1').keyup(function(ev){ var row1c = $(this).val() * 1000; $('.row1c').html((row1c).toFixed(2)); }); $('.row2').keyup(function(ev){ var row2c = $(this).val() * 500; $('.row2c').html((row2c).toFixed(2)); }); $('.row3').keyup(function(ev){ var row3c = $(this).val() * 100; $('.row3c').html((row3c).toFixed(2)); }); $('.row4').keyup(function(ev){ var row4c = $(this).val() * 50; $('.row4c').html((row4c).toFixed(2)); }); $('.row5').keyup(function(ev){ var row5c = (row1c+row2c+row3c+row4c); $('.row5c').html((row5c).toFixed(2)); }); $('input[type=text]').keyup(function(){ var total = 0; $('input[type=text]').each(function(){ total += Number($(this).parent().next().find('span').text()); }) $('.row5c').text(total.toFixed(2)); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="2" cellpadding="5" cellspacing="2" align="center"> <h3 align="center">Cash Position as on...... </h3> <tr> <th>Note</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td>1000 Tk Note</td> <td> <input type="text" name="pages" class="row1" /> </td> <td><span class="row1c">0.00</span> </td> </tr> <tr> <td>500 Tk Note</td> <td> <input type="text" name="pages" class="row2" /> </td> <td><span class="row2c">0.00</span> </td> </tr> <tr> <td>100 Tk Note</td> <td> <input type="text" name="pages" class="row3" /> </td> <td><span class="row3c">0.00</span> </td> </tr> <tr> <td>50 Tk Note</td> <td> <input type="text" name="pages" class="row4" /> </td> <td><span class="row4c">0.00</span> </td> </tr> <tr> <td colspan="2">Cash In Hand (Sum of All Totals)</td> <td><span class="row5c">0.00</span> </td> </tr> </table>