"Dynamic Sortable Tables"
Bootstrap 4.1.1 Snippet by fractorr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <div class="container"> <div class="row clearfix"> <div class="col-md-12 table-responsive"> <table class="table table-bordered table-hover table-sortable" id="tab_logic"> <thead> <tr > <th class="text-center"> Name </th> <th class="text-center"> Email </th> <th class="text-center"> Notes </th> <th class="text-center"> Option </th> <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;"> </th> </tr> </thead> <tbody> <tr id='addr0' data-id="0" class="hidden"> <td data-name="name"> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td data-name="mail"> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td data-name="desc"> <textarea name="desc0" placeholder="Description" class="form-control"></textarea> </td> <td data-name="sel"> <select name="sel0"> <option value="">Select Option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </td> <td data-name="del"> <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden="true">×</span></button> </td> </tr> </tbody> </table> </div> </div> <a id="add_row" class="btn btn-primary float-right">Add Row</a> </div>
.table-sortable tbody tr { cursor: move; }
$(document).ready(function() { $("#add_row").on("click", function() { // Dynamic Rows Code // Get max row id and set new id var newid = 0; $.each($("#tab_logic tr"), function() { if (parseInt($(this).data("id")) > newid) { newid = parseInt($(this).data("id")); } }); newid++; var tr = $("<tr></tr>", { id: "addr"+newid, "data-id": newid }); // loop through each td and create new elements with name of newid $.each($("#tab_logic tbody tr:nth(0) td"), function() { var td; var cur_td = $(this); var children = cur_td.children(); // add new td and element if it has a nane if ($(this).data("name") !== undefined) { td = $("<td></td>", { "data-name": $(cur_td).data("name") }); var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val(""); c.attr("name", $(cur_td).data("name") + newid); c.appendTo($(td)); td.appendTo($(tr)); } else { td = $("<td></td>", { 'text': $('#tab_logic tr').length }).appendTo($(tr)); } }); // add delete button and td /* $("<td></td>").append( $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>") .click(function() { $(this).closest("tr").remove(); }) ).appendTo($(tr)); */ // add the new row $(tr).appendTo($('#tab_logic')); $(tr).find("td button.row-remove").on("click", function() { $(this).closest("tr").remove(); }); }); // Sortable Code var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified }).disableSelection(); $(".table-sortable thead").disableSelection(); $("#add_row").trigger("click"); });

Related: See More


Questions / Comments:

como capturo los datos en php? ya he probado de todo.

fernando dulcien () - 9 years ago - Reply -2


je veux récupérer les valeurs entrés vous avez une idée ???
mercii d'avance

Afaf Bourakkadi () - 7 years ago - Reply 0


Beautifully done! I got exactly what I needed with this snippet thank you SO much!

Sven Rodriguez () - 7 years ago - Reply 0


I know this is a old post but i'm using your code for my project and, I'm trying to use arrays to store the data inside the fields. thing is, it only reads the first row and always skips the others no matter how much I add

Luis Cerqueira () - 7 years ago - Reply 0


can I dynamically generate datepicker instead of textfield????

EM PHP () - 8 years ago - Reply 0


I want to put two forms (Dynamic Sortable dropdown) in page ? Can I duplicate the javascript?

Lucas () - 8 years ago - Reply 0


how change the select, for this: http://bootsnipp.com/snippe...

matias () - 8 years ago - Reply 0


How calibration instead of an input field installing a button

HaJo () - 8 years ago - Reply 0


It's impossible to click on a field in firefox??

Rick () - 9 years ago - Reply 0


For resolve the firefox issue.. Just remove .disableSelection() to the tbody

Rick () - 9 years ago - Reply 0


Hi, as the active fields in the table?

Marcelo Sulca Nieto () - 9 years ago - Reply 0