insert items in table and Sub table using Jquery-CodePudding

The

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head> <body> <div > <form> <table > <tbody> <tr> <td><input type="text" id='txtCustomerNumb' placeholder="Customer Number" /></td> <td><input type="text" id='txtCustomerName' placeholder="Customer Name" /></td> <td><input type="text" id='txtDeliverTo' placeholder="Deliver To" /></td> <td></td> </tr> <tr> <td><input type="text" id='txtDriverName' placeholder="Driver Name" /></td> <td><input type="text" id='txtDriverContact' placeholder="Driver Contact" /></td> <td><input type="text" id='txtVehNumber' placeholder="Vehicle No." /></td> <td></td> </tr> <tr> <td> <select id="txtDeliverTo" placeholder="Exit Point"> <option value="">Select Exit Point</option> <option value="Exit_Point_1">Exit Point 1</option> <option value="Exit_Point_2">Exit Point 2</option> <option value="Exit_Point_3">Exit Point 3</option> </select> </td> <td><input type="text" id='txtDeliverTo' placeholder="Deliver To" /></td> <td><input type="text" id='txtExitType' placeholder="Type Of Exit" /></td> <td></td> </tr> </tbody> </table> <div > <div > <label>Name:</label> <input type="text" name="name" value="Smith" required=""> </div> <div > <label>Email:</label> <input type="text" name="email" value="[email protected]" required=""> </div> <div style="padding-top: 23px;"> <button type="submit" >Add</button> </div> </div> </form> <br/> <table > <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> </tbody> </table> </div> <script type="text/javascript"> $("form").submit(function(e){ e.preventDefault(); var name = $("input[name='name']").val(); var email = $("input[name='email']").val(); $(".data-table tbody").append("<tr data-name='" name "' data-email='" email "'><td>" name "</td><td>" email "</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>"); $("input[name='name']").val(''); $("input[name='email']").val(''); }); $("body").on("click", ".btn-delete", function(){ $(this).parents("tr").remove(); }); $("body").on("click", ".btn-edit", function(){ var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="' name '">'); $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="' email '">'); $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") $(this).hide(); }); $("body").on("click", ".btn-cancel", function(){ var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-update").remove(); $(this).parents("tr").find(".btn-cancel").remove(); }); $("body").on("click", ".btn-update", function(){ var name = $(this).parents("tr").find("input[name='edit_name']").val(); var email = $(this).parents("tr").find("input[name='edit_email']").val(); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").attr('data-name', name); $(this).parents("tr").attr('data-email', email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-cancel").remove(); $(this).parents("tr").find(".btn-update").remove(); }); </script> </body> </html>

CodePudding user response：

You can use Bootstrap-Table, here is an example of what you are looking to do:

https://examples.bootstrap-table.com/#welcome.html#view-source

In this case you can have a table with more options, also you can use ajax to load, paginate and execute actions to the data.

Other option is inside your table you can insert a subtable with javascript.

CodePudding user response：

Consider the following example. This is using the latest Bootstrap version.

$(function() { function addItem(data, table) { var row = $("<tr>").data("item", data).appendTo(table); $.each(data, function(k, v) { $("<td>").html(v).appendTo(row); }); $("<td>").appendTo(row); $.each(["update", "cancel", "edit", "delete"], function(i, el) { $("<button>", { class: "btn btn-sm btn-" el }).html(el[0].toUpperCase() el.substr(1)).appendTo("td:last", row); }); $(".btn-edit, .btn-update", row).addClass("btn-info"); $(".btn-cancel", row).addClass("btn-warning"); $(".btn-delete", row).addClass("btn-danger"); $("button:lt(2)", row).hide(); } function editItem(row) { var item = $(row).data("item"); var keys = Object.keys(item); $("td:not(:last)", row).each(function(i, el) { $(el).html( $("<input>", { name: "item_" keys[i], type: (i < 2) ? "text" : "number", value: item[keys[i]] }) ); }); $("button", row).show(); $("button:gt(1)", row).hide(); } function updateItem(row) { var newItem = { name: $("input[name='item_name']", row).val(), desc: $("input[name='item_desc']", row).val(), qnty: $("input[name='item_qnty']", row).val() }; var keys = Object.keys(newItem); $(row).data("item", newItem); $("td:not(:last)", row).each(function(i, el) { $(el).empty().html(newItem[keys[i]]); }); $("button", row).show(); $("button:lt(2)", row).hide(); } $("form").submit(function(e) { e.preventDefault(); var item = { name: $("input[name='item']").val(), desc: $("input[name='description']").val(), qnty: $("input[name='quantity']").val() }; addItem(item, "table.data-table"); $("input[name='item'], input[name='description'], input[name='quantity']").val(''); }); $(".table").on("click", ".btn-delete", function() { if (confirm("Are you sure you wish to delete this row?")) { $(this).closest("tr").remove(); } }); $(".table").on("click", ".btn-edit", function() { editItem($(this).closest("tr")); }); $(".table").on("click", ".btn-cancel", function() { var row = $(this).closest("tr"); var item = $(row).data("item"); var keys = Object.keys(item); $("td:not(:last)", row).each(function(i, el) { $(el).html(item[keys[i]]); }); $("button", row).show(); $("button:lt(2)", row).hide(); }); $("body").on("click", ".btn-update", function() { updateItem($(this).closest("tr")); }); });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <div > <form> <div > <div > <table > <tbody> <tr> <td><input type="text" id='txtCustomerNumb' placeholder="Customer Number" /></td> <td><input type="text" id='txtCustomerName' placeholder="Customer Name" /></td> <td><input type="text" id='txtDeliverTo' placeholder="Deliver To" /></td> <td></td> </tr> <tr> <td><input type="text" id='txtDriverName' placeholder="Driver Name" /></td> <td><input type="text" id='txtDriverContact' placeholder="Driver Contact" /></td> <td><input type="text" id='txtVehNumber' placeholder="Vehicle No." /></td> <td></td> </tr> <tr> <td> <select id="txtDeliverTo" placeholder="Exit Point"> <option value="">Select Exit Point</option> <option value="Exit_Point_1">Exit Point 1</option> <option value="Exit_Point_2">Exit Point 2</option> <option value="Exit_Point_3">Exit Point 3</option> </select> </td> <td><input type="text" id='txtDeliverTo' placeholder="Deliver To" /></td> <td><input type="text" id='txtExitType' placeholder="Type Of Exit" /></td> <td></td> </tr> </tbody> </table> </div> <div > <button type="submit">Create</button> </div> </div> </form> </div> <form> <div > <div > <input type="text" name="item" placeholder="Item Name" required /> </div> <div > <input type="text" name="description" placeholder="Item Description" required=""> </div> <div > <input type="number" name="quantity" placeholder="Quantity" required=""> </div> <div > <button type="submit" >Add</button> </div> </div> </form> <table > <thead> <th>Name</th> <th>Description</th> <th>Quantity</th> <th>Action</th> </thead> <tbody> </tbody> </table>

You can see there are a lot of functions that can be created if you choose. The cancel event is an example without using functions.

You will want to use .closest() to find the parent row. You can then properly select elements from the row as needed.

It did not make a lot of sense to add and remove buttons, better to just hide them when not needed.