Question

I have an HTML table with columns of input boxes, and would like the sum of the values in the boxes to be displayed automatically (i.e. without clicking a sum button and updates as the values in the boxes are changed). The number of rows in the table varies as it is dynamically created through velocity. Below is an example HTML table, I want the sum of the values in the capacity row to be displayed. I am not really sure where to start, I have tried numerous JavaScript code and have been unable to get anything to correctly work.

 <table border = "1" id = "table">
  <TR>
        <TH>Resource</TH> 
        <TH>Vacation</TH>
        <TH>Allocation</TH>
        <TH>Holidays</TH> 
        <TH>Capacity</TH>
        <TH>Remainder</TH>
    </TR>

  #foreach($user in $userList)
  <tr>
  <td>$user.resource</td>

        <td><input type=text name="vacation" size="6" maxlength="10"></td>
        <td><input type=text name="alloc" size="6" maxlength="10"></td>
        <td><input type=text name="holidays" size="6" maxlength="10"></td>
        <td><input type=text name="capacity" size="6" maxlength="10"></td>
        <td><input type=text name="remainder" size="6" maxlength="10"></td>
    </tr>
  #end 
  <tr>
  <td>Total:</td>
  <td></td><td></td><td></td>
  <td class= "capsum"><input type="text" name="captotal" size="6" maxlength="10"></td>
  <td><input type="text" name="remtotal" size="6" maxlength="10"></td>

  </tr>

  </table>

There will be multiple rows in the table, and each input box in the capacity column shares the same name. So the sum of the Capacity column should be displayed in the “capsum” input box, and should be calculated automatically and update as the values in the input boxes are changed.

Answer 1

Something like this:

$('table#table input[name=capacity]').change(function()
{
 var sum = 0;

 $('table#table input[name=capacity]').each(function()
 {
  sum += parseInt($(this).val());
 });

 $('input[name=captotal]').val(sum);
});

http://jsfiddle.net/H7DSX/10/