javascript - Summation using for loop -


i want find total input field , set total value particular text field. here 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 want add each adult,young,children field in each row , set value corresponded total column.i used loop purpose. shows error while adding. here sample code. http://jsfiddle.net/3gxnya5a/

you can use simple loop like

$(document).ready(function () {     $('#table').on('keyup', 'input', function () {          //loop through each 4th td in each rows sum elements         $("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {             var sum = 0;             //add 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>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -