How to enter the dynamically added row contents to a database
Question
<script> var i=0; currentRow = null; $("button#savebutton").click(function(){ var cat = $("#cat-list").val(); var display = $("#displayname").val(); var subcat = $("#subcat-list").val(); var order = $("#privilage").val(); i++; var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>"; if(currentRow){ $("table tbody").find($(currentRow)).replaceWith(new_row); currentRow = null; } else{ $("table tbody").append(new_row); } }); $(document).on('click', 'span.deleterow', function () { $(this).parents('tr').remove(); return false; }); $(document).on('click', 'span.editrow', function () { currentRow= $(this).parents('tr'); // $("#minAmt").val($(this).closest('tr').find('td.minAmt').text()); //$("#maxAmt").val($(this).closest('tr').find('td.maxAmt').text()); // $("#type").val($(this).closest('tr').find('td.type').text()); }); </script>
<html> <head> </head> <body> <form method="POST" action=""/> <label>Category</label> <input type="text" id="cat-list"/></br> <label>Display</label> <input type="text" id="displayname"/></br> <label>SubCategory</label> <input type="text" id="subcat-list"/></br> <label>Privilage</label> <input type="text" id="privilage"/></br> </form> <div class="col-md-12"> <div class="form-actions btnzone"> <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button> </div> </div> </form> <form class="form-horizontal" role="form" id="chargestableForm"> <div class="col-md-12"> <table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" > <thead style="background-color:#CCE5FF"> <tr> <th>Category</th> <th>DisplayName</th> <th>Subcategory</th> <th>Order</th> <th colspan=2>Action</th> </tr> </thead> <tbody> </tbody> </table> </form> </body> </html>
2 answers
solution1
0 2018-01-29 12:54:40
Create a new .php file which will query the database. What you are doing now is all client side, you can use ajax in jquery to that new created file.php and send the data via ajax hence you will not have to reload the page, and the data will be sent onclick
solution2
0 ACCPTED 2018-02-15 13:14:54
<script> var i = 0; currentRow = null; $("button#savebutton").click(function() { var cat = $("#cat-list").val(); var display = $("#displayname").val(); var subcat = $("#subcat-list").val(); var order = $("#privilage").val(); i++; //Inserting first row to the table with edit and delete button var new_row = "<tr id='row" + i + "' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat + "</td><td>" + order + "</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>"; //Appending the new row to the table if (currentRow) { $("table tbody").find($(currentRow)).replaceWith(new_row); currentRow = null; } else { $("table tbody").append(new_row); } }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
adding dynamically added table row values into database
How to clear the dynamically added div contents and display only the div contents?
How to create cascading dropdown list inside dynamically added table row and save in the database
How to delete dynamically added row using jQuery?
How to Align a div in Center When Contents added Dynamically
How to store a dynamically added content to database
How to get the values of dynamically added rows into database?
How to append a row with user entered text value dynamically added rows?
How to keep dynamically added row in a scroll-able table
How to refresh JQuery mobile table after a row is added dynamically
Related Tags