<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr > <th class="text-center"> # </th> <th style="width:50%"> Descripcion </th> <th class="text-center"> Uds </th> <th class="text-center"> V. Unidad </th> <th class="text-center"> Total (sin IVA) </th> <th class="text-center"> Años Antig </th> <th class="text-center"> Coef. Depr. </th> <th class="text-center"> V. Real </th> <th class="text-center"> V. Nuevo </th> <th class="text-center"> IVA </th> <th class="text-center"> Total V. Real </th> <th class="text-center"> Total V. Nuevo </th> </tr> </thead> <tbody> <tr id='addr1'></tr> <tr id='addr0'> <td> 1 </td> <td> <input type="text" style='padding: 6px 3px' name='description[]' placeholder='' class="form-control"/> </td> <td> <input type="text" style='padding: 6px 3px' name='unidades[]' placeholder='0,0' class="txtMult val1 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='vunidad[]' placeholder='- €' class="txtMult val2 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='totalsiva[]' placeholder='- €' class="txtMult val3 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='antig[]' placeholder='- €' class="txtMult val4 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='coef[]' placeholder='0' class="txtMult val5 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='vreal[]' placeholder='0,00' class="txtMult val6 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='vnuevo[]' placeholder='- €' class="txtMult val7 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='iva[]' placeholder='10%' class="txtMult val8 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='totalvreal[]' placeholder='- €' class="txtMult val9 form-control text-center"/> </td> <td> <input type="text" style='padding: 6px 3px' name='totalvnuevo[]' placeholder='- €' class="txtMult val10 form-control text-center"/> </td> </tr> <tr id='total'> <td> </td> <td> </td> <td> <span id="total1">0.00</span> </td> <td> <span id="total2">0.00</span> </td> <td> <span id="total3">0.00</span> </td> <td> <span></span> </td> <td> <span></span> </td> <td> <span id="total6">0.00</span> </td> <td> <span id="total7">0.00</span> </td> <td> <span></span> </td> <td> <span id="total9">0.00</span> </td> <td> <span id="total10">0.00</span> </td> </tr> </tbody> </table> </div> </div> <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> </div>

$(document).ready(function(){ var i=1; $("#add_row").click(function(){ $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>"); $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input style=\'padding: 6px 3px\' name=\'description[]\' type=\'text\' placeholder=\'\' class=\'form-control\' /> </td><td><input style=\'padding: 6px 3px\' name=\'unidades[]\' type=\'text\' placeholder=\'0,0\' class=\'val1 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'vunidad[]\' type=\'text\' placeholder=\'- €\' class=\'val2 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'totalsiva[]\' type=\'text\' placeholder=\'- €\' class=\'val3 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'antig[]\' type=\'text\' placeholder=\'- €\' class=\'val4 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'coef[]\' type=\'text\' placeholder=\'0\' class=\'val5 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'vreal[]\' type=\'text\' placeholder=\'0,0\' class=\'val6 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'vnuevo[]\' type=\'text\' placeholder=\'- €\' class=\'val7 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'iva[]\' type=\'text\' placeholder=\'21\' class=\'val8 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'totalvreal[]\' type=\'text\' placeholder=\'- €\' class=\'val9 form-control text-center\'></td><td><input style=\'padding: 6px 3px\' name=\'totalvnuevo[]\' type=\'text\' placeholder=\'- €' class='val11 form-control text-center'></td>"); $('#tab_logic').prepend('<tr id="addr'+(i+1)+'"></tr>'); i++; }); $("#delete_row").click(function(){ if(i>1){ $("#addr"+(i-1)).html(''); i--; } }); $(document).on('click', 'html', function(e) { $('.val1').blur(function () { var sum1 = 0; $('.val1').each(function() { if($(this).val()!="") { sum1 += parseFloat($(this).val()); } }); $('#total1').html(sum1); }); $('.val2').blur(function () { var sum2 = 0; $('.val2').each(function() { if($(this).val()!="") { sum2 += parseFloat($(this).val()); } }); $('#total2').html(sum2); }); $('.val3').blur(function () { var sum3 = 0; $('.val3').each(function() { if($(this).val()!="") { sum3 += parseFloat($(this).val()); } }); $('#total3').html(sum3); }); $('.val4').blur(function () { var sum4 = 0; $('.val1').each(function() { if($(this).val()!="") { sum4 += parseFloat($(this).val()); } }); $('#total4').html(sum4); }); $('.val5').blur(function () { var sum5 = 0; $('.val5').each(function() { if($(this).val()!="") { sum5 += parseFloat($(this).val()); } }); $('#total5').html(sum5); }); $('.val6').blur(function () { var sum6 = 0; $('.val6').each(function() { if($(this).val()!="") { sum6 += parseFloat($(this).val()); } }); $('#total6').html(sum6); }); $('.val7').blur(function () { var sum7 = 0; $('.val7').each(function() { if($(this).val()!="") { sum7 += parseFloat($(this).val()); } }); $('#total7').html(sum7); }); $('.val8').blur(function () { var sum8 = 0; $('.val8').each(function() { if($(this).val()!="") { sum8 += parseFloat($(this).val()); } }); $('#total8').html(sum8); }); $('.val9').blur(function () { var sum9 = 0; $('.val9').each(function() { if($(this).val()!="") { sum9 += parseFloat($(this).val()); } }); $('#total9').html(sum9); }); $('.val10').blur(function () { var sum10 = 0; $('.val10').each(function() { if($(this).val()!="") { sum10 += parseFloat($(this).val()); } }); $('#total10').html(sum10); }); $('.val11').blur(function () { var sum11 = 0; $('.val11').each(function() { if($(this).val()!="") { sum11 += parseFloat($(this).val()); } }); $('#total11').html(sum11); }); }); });