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
Post a Comment