Summation using for loop

Question

I want to find the total from the input field and set the total value to the particular text field. Here is my Html:

 <table id="table" border="1">

 <tr>
     <td></td>
     <td colspan="4">Injuried</td>
     <td colspan="4">Killed</td>
     <td colspan="4">Died</td>
 </tr>
<tr>
     <td></td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
</tr>

<tr>
    <td>number</td>
    <td><input type="text" size="5" /></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text"size="5" /></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>

</tr>
<tr>
     <td>number</td>
    <td><input type="text" size="5" /></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text"size="5" /></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>

</tr>
</table>

Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding. Here is my sample code. http://jsfiddle.net/3gxnya5a/

can you please explain , how you want the output the total of separate section should be in that category total.? — Sarath Kumar
– Sarath Kumar, Commented Jun 1, 2015 at 8:42

Arun P Johny · Accepted Answer · 2015-06-01 08:44:55Z

You can use a simple loop like

$(document).ready(function () {
    $('#table').on('keyup', 'input', function () {

        //loop through each 4th td in each rows as they are the sum elements
        $("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
            var sum = 0;
            //add up the previous 4 values
            $(this).prevAll(':lt(3)').find('input').each(function () {
                sum += (+this.value || 0)
            });
            $(this).find('input').val(sum)
        })
    })
})

$(document).ready(function() {
  $('#table').on('keyup', 'input', function() {

    $("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
      var sum = 0;
      $(this).prevAll(':lt(3)').find('input').each(function() {
        sum += (+this.value || 0)
      });
      $(this).find('input').val(sum)
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <td></td>
    <td colspan="4">Injuried</td>
    <td colspan="4">Killed</td>
    <td colspan="4">Died</td>
  </tr>
  <tr>
    <td></td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
  </tr>
  <tr>
    <td>number</td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
  </tr>
  <tr>
    <td>number</td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
  </tr>
</table>

fdomn-m · Accepted Answer · 2015-06-01 09:09:29Z

Already answered, but I felt worth adding an alternative.

If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:

<table id='theTable'>
  <tbody>
    <tr>
      <td><input type="text" size="5" class='data-add' /></td>
      <td><input type="text" size="5" class='data-add' /></td>
      <td><input type="text" size="5" /></td>
      <td><input type="text" size="5" class='data-total'/></td>

then

$("#theTable>tbody>tr").each(function() {
    var sum = 0;
    $(".data-add", this).each(function() {
        sum += (+this.value || 0);  // stolen from Arun to ignore invalid values etc
    });
    $(".data-total", this).val(sum);
});

Collectives™ on Stack Overflow

Summation using for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related