<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script> <div class="container"> <div class="row clearfix"> <div class="col-md-8 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Area Name </th> <th class="text-center"> Width </th> <th class="text-center"> Height </th> <th class="text-center"> Total Area MT² </th> </tr> </thead> <tbody> <tr id='addr0'> <td> 1 </td> <td> <input type="text" id='pn0' name='pn0' placeholder='Area Name' class="form-control"/> </td> <td> <input type="text" id='pw0' name='pw0' value="0" placeholder='Watt' class="form-control txt"/> </td> <td> <input type="text" id='pq0' name='pq0' value="0" placeholder='Quantity' class="form-control txt"/> </td> <td> <input readonly id='el0' type="text" name='el0' value="0" placeholder='Electricity Load' class="form-control"/> </td> <td> <button id="btn0" class='btn btn-success new_row'>+</button> </td> </tr> <tr id='addr1'></tr> </tbody> </table> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-12"> <a id="add_row" style="color:#fff;border:1px groove #faa43d;background-color:#faa43d;padding: 10px 10px;border-radius: 0px;" class="btn pull-left add_row">Add Row</a> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <p id="grand" style="color:#000;border:1px groove #d6ecfa;background-color:#d6ecfa;padding: 9px 25px;border-radius: 0px;">...</p> </div> </div> <div class="row"> <div class="col-md-4"> <p id="lblunit" style="color:#000;border:1px groove #d6ecfa;background-color:#d6ecfa;padding: 10px 10px;border-radius: 0px;">Enter Usage Hours: <input type="text" id='uh' name='uh' value="1" placeholder='Usage Hours' class="form-control txt" style="color:#000;border:1px groove #000;padding: 0px 0px;border-radius: 0px;"/> </p> </div> <div class="col-md-4"> <p id="lblunit" style="color:#000;border:1px groove #d6ecfa;background-color:#d6ecfa;padding: 10px 10px;border-radius: 0px;">Unit Consumed: <input readonly type="text" id='tu' name='tu' placeholder='Units' class="form-control txt" style="color:#000;border:1px groove #000;padding: 0px 0px;border-radius: 0px;"/> </p> </div> <div class="col-md-4"> <p id="lblunit" style="color:#000;border:1px groove #d6ecfa;background-color:#d6ecfa;padding: 10px 10px;border-radius: 0px;">You Save( Rs7/-Unit) <input readonly type="text" id='rs' name='rs' placeholder='Rupees' class="form-control txt" style="color:#000;border:1px groove #000;padding: 0px 0px;border-radius: 0px;"/> </p> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <p id="msave" style="color:#000;border:1px groove #d6ecfa;background-color:#d6ecfa;padding: 9px 25px;border-radius: 0px;">...</p> </div> </div> </div> </div> </div>

$(document).ready(function(){ var i=1; var gtw=0; $(".add_row").click(function(){ GrandTotal(); $('#addr'+i).append("<td>"+ (i+1) +"</td><td><input id='pn"+i+"' name='pn"+i+"' type='text' placeholder='Product Name' class='form-control input-md' /> </td> <td><input id='pw"+i+"' value='0' name='pw"+i+"' type='text' placeholder='Watt' class='form-control input-md txt'></td><td><input id='pq"+i+"' name='pq"+i+"' type='text' value='0' placeholder='Quantity' class='form-control input-md txt'></td><td><input id='el"+i+"' name='el"+i+"' value='0' type='text' readonly placeholder='Electricity Load' class='form-control input-md'></td> <td><button id='btn"+i+"' class='btn btn-success new_row'>+</button></td>"); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); var rno=i-1; var pw=$('#pw'+rno).val(); var pq=$('#pq'+rno).val(); var tw=pw*pq; $('#el'+rno).val(tw); i++; }); $(document).on("click","button.del_row",function() { var rowId=$(this).parent().parent().attr("id"); $("#"+rowId).remove(); GrandTotal(); }); $(document).on("click","button.new_row",function() { GrandTotal(); $('#addr'+i).append("<td>"+ (i+1) +"</td><td><input id='pn"+i+"' name='pn"+i+"' type='text' placeholder='Product Name' class='form-control input-md' /> </td> <td><input id='pw"+i+"' value='0' name='pw"+i+"' type='text' placeholder='Watt' class='form-control input-md txt'></td><td><input id='pq"+i+"' name='pq"+i+"' type='text' value='0' placeholder='Quantity' class='form-control input-md txt'></td><td><input id='el"+i+"' name='el"+i+"' value='0' type='text' readonly placeholder='Electricity Load' class='form-control input-md'></td> <td><button id='btn"+i+"' class='btn btn-success new_row'>+</button></td>"); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); var rno=i-1; $('#btn'+rno).removeClass("new_row btn-success"); $('#btn'+rno).addClass("del_row btn-danger"); $('#btn'+rno).html("-"); var pw=$('#pw'+rno).val(); var pq=$('#pq'+rno).val(); var tw=pw*pq; $('#el'+rno).val(tw); i++; }); $("#btn_done").click(function(){ GrandTotal(); }); $(document).on("change",".txt",function() { var rowId=$(this).attr("id"); var rno=rowId.substring(2); var pw=$('#pw'+rno).val(); var pq=$('#pq'+rno).val(); $('#el'+rno).val(pw*pq); GrandTotal(); }); function GrandTotal() { var T = document.getElementById('tab_logic'); gtw=0; var x=$(T).find('> tbody > tr').length; var c=1; $(T).find('> tbody > tr').each(function () { var rowId=$(this).attr("id"); var rno=rowId.substring(4); if(c<x) { gtw+=parseFloat($('#el'+rno).val()); c++; } }); $('#grand').html("Your House Total Electricity Load is " + gtw + " Watt."); rstotal(); return 1; } $(document).on("keyup","#uh",function() { rstotal(); }); function rstotal() { var h=parseFloat($('#uh').val()); var u=((gtw/1000)*h).toFixed(2); var rs=(u*7).toFixed(2); $('#tu').val(u); $('#rs').val(rs); $('#msave').html("Your Monthly Saving By Virat Solar Power is ₹ <label id='lblresult' class='label label-danger'>" + rs + "</label> /- Only."); } });