santan lal das Posted February 20, 2020 Share Posted February 20, 2020 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to add or remove rows in a table dynamically jQuery </title> <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /*find varial in textbox*/ function myFunction(){ var test_code = $('#tests').find(':selected').data('testcode'); var test_name = $('#tests').find(':selected').data('testname'); var generalprice = $('#tests').find(':selected').data('generalprice'); var totalprice = $('#tests').find(':selected').data('totalprice'); $('#test_code').val(test_code); $('#test_name').val(test_name); $('#generalprice').val(generalprice ); $('#totalprice').val(totalprice); } </script> </head> <body> <div class="form-group"> <form> <input name="patid" type="text" id="patid" placeholder="patid" value=""> <select name="name" ID="tests" onchange="myFunction()" class="form-control"> <option value="Select">Select</option> <?php include("database.php"); $qu="SELECT DISTINCT test_name,test_name_code,test_name,general_test_price, general_Total_Amount from test_name_setup "; $res=$conn->query($qu); while($r=mysqli_fetch_row($res)) { echo "<option data-testcode='$r[1]' data-testname='$r[2]' data-generalprice='$r[3]' data-totalprice='$r[4]' value='$r[0]'> $r[0] </option>"; } ?> </select> <div class="container" id="multiple"> <input name="test_code" type="text" id="test_code" placeholder="test code" value=""> <input name="test_name" type="text" id="test_name" placeholder="test Name" value=""> <input class="qtol1" name="generalprice" type="Number" id="generalprice" placeholder="general price"> <input class="qtol2" name="quantity" type="Number" id="quantity" value="1" onClick="calc()" placeholder="quantity"> <input class="qtol3" name="totalprices" type="Number" id="totalprices" placeholder="total prices"> <input class="qtol" name="totalprice" type="text" id="totalprice" placeholder="total price"> <input name="send" type="button" id="butsend" class="add-row" value="Add Row"> <input name="send" type="reset" id="butsend" class="add-row" value="Rest Row"> </div> <div> <input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave"> </div> <table id="table1" name="table1" class="table table-bordered"> <tbody> <tr> <th>Serial no.</th> <th>ID</th> <th>Test code</th> <th>Test name</th> <th>General price</th> <th>Quantity</th> <th>Total prices</th> <th>Total price</th> <th>Action</th> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Total:</td> <td ><input id="subtotal" name="subtotal" type="text"></td> <td></td> <td></td> </tr> </tfoot> </table> </form> </div> <script> $(document).ready(function() { var id = 1; var generalprice = 0; var quantity = 0; var totalprice =0; var totalprices =0; /*Assigning id and class for tr and td tags for separation add in column.*/ $("#butsend").click(function() { var newid = id++; $("#table1").append('<tr valign="top" id="'+newid+'">\n\ <td width="100px" >' + newid + '</td>\n\ <td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\ <td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\ <td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\ <td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\ <td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\ <td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\ <td width="100px" id="qntytolprice" class="totalprice'+newid+'">' + $("#totalprice").val() + '</td>\n\ <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>'); }); $("#table1").on('click', '.remCF', function() { $(this).parent().parent().remove(); $('#table1 tbody tr').each(function(id){ $($(this).find('td')[0]).html(id++); }); }); /*creating new click event for save button*/ $("#butsave").click(function() { var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/ var test_code = new Array(); var test_name = new Array(); var generalprice = new Array(); var quantity = new Array(); var totalprice = new Array(); var totalprices = new Array(); var patid = new Array(); for ( var i = 1; i <= lastRowId; i++) { patid.push($("#"+i+" .patid"+i).html()); /*pushing all the test_code listed in the table*/ test_code.push($("#"+i+" .test_code"+i).html()); /*pushing all the test_code listed in the table*/ test_name.push($("#"+i+" .test_name"+i).html()); /*pushing all the test_name listed in the table*/ generalprice.push($("#"+i+" .generalprice"+i).html()); /*pushing all the gprice listed in the table*/ quantity.push($("#"+i+" .quantity"+i).html()); /*pushing all the quantity listed in the table*/ totalprices.push($("#"+i+" .totalprices"+i).html()); /*pushing all the tprice listed in the table*/ totalprice.push($("#"+i+" .totalprice"+i).html()); /*pushing all the tprice listed in the table*/ } var sendtest_code = JSON.stringify(test_code); var sendtest_name = JSON.stringify(test_name); var sendgeneralprice = JSON.stringify(generalprice); var sendquantity = JSON.stringify(quantity); var sendtotalprices = JSON.stringify(totalprices); var sendtotalprice = JSON.stringify(totalprice); var sendpatid = JSON.stringify(patid); $.ajax({ url: "rough9process.php", type: "post", data: {patid : sendpatid , test_code : sendtest_code , test_name : sendtest_name , generalprice : sendgeneralprice, quantity: sendquantity , totalprices : sendtotalprices ,totalprice : sendtotalprice}, success : function(data){ alert(data); /* alerts the response from php.*/ } }); }); }); </script> <script> $(".qtol2,.qtol1").keyup(function() { $('.qtol3').val($('.qtol1').val() * $('.qtol2').val()); }); </script> <script> /*get sum in col*/ $(document).ready(function(){ var TotalValue = 0; $("#table1 tr").each(function(){ TotalValue += parseFloat($(this).find('.totalprices').text()); }); }); </script> <script> $(document).ready(function() { $('table thead th').each(function(i) { calculateColumn(i); }); }); function calculateColumn(index) { var total = 0; $('table tr').each(function() { var value = parseInt($('td', this).eq(index).text()); if (!isNaN(value)) { total += value; } }); $('table tfoot td').eq(index).text('Total:' + total); } </script> </body> </html> Link to comment Share on other sites More sharing options...
ishan_shah Posted March 16, 2020 Share Posted March 16, 2020 Here is the solution: $("#butsend").click(function() { var grandtotal=0; var newid = id++; $("#table1").append('<tr valign="top" id="'+newid+'">\n\ <td width="100px" >' + newid + '</td>\n\ <td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\ <td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\ <td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\ <td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\ <td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\ <td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\ <td width="100px" id="qntytolprice" class="totalprice'+newid+'">' + $("#totalprice").val() + '</td>\n\ <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>'); for (let i =1; i<id ;i++){ grandtotal += parseInt($(".totalprices"+i+"").text() ? $(".totalprices"+i+"").text() : 0 ); } $("#subtotal").val(grandtotal); }); I have created new var of grandtotal and initialized it with 0 and used for loop for getting GrandTotal of all prices. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now