"Dynamic Sortable Tables"
Bootstrap 3.3.0 Snippet by luizpauloalbers

<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="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <form class="form-horizontal" role="form" method="post" action="//formspree.io/luizpauloalbers@gmail.com"> <div class="navbar navbar-fixed navbar-default form-group"> <div class="container"> <div class="navbar-header"> <a class="brand" href="http://conazsolucoes.com.br" target="_blank" > <img class="img-responsive" width="150" src="http://static.wixstatic.com/media/47d33f_93fc8dab5e0a469f95464ac620d84f09.png_srb_p_241_87_75_22_0.50_1.20_0.00_png_srb" max-width: 1% alt=""> </a> </div class="navbar-collapse collapse"> <div class="form-actions "> <div class="col-sm-130 top-buffer3 pull-right" > <input id="submit" name="submit" type="submit" value="Enviar" class="btn btn-primary btn-lg "> <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Email" required oninvalid="this.setCustomValidity('Preencha seu email')"> </div> </div> </div> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 table-responsive"> <table class="table table-hover table-sortable" id="tab_logic"> <thead> <tr > <th class="text-center"> Insumo </th> <th class="text-center"> Detalhe </th> <th class="text-center"> Quantidade </th> <th class="text-center"> Unidade </th> </tr> </thead> <tbody> <tr id='addr0' data-id="0" class="hidden"> <td data-name="insumo"> <input type="text" name='insumo' placeholder='Ex. Aço' class="form-control"/> </td> <td data-name="detalhe"> <input type="text" name='detalhe' placeholder='Ex. Barra Reta 5 mm' class="form-control"/> </td> <td data-name="quantidade"> <input type="text" name='quantidade' placeholder="Ex. 12" class="form-control"/> </td> <td data-name="unidade"> <input type="text" name='unidade' placeholder='Ex. Barra' class="form-control"/> </td> <td data-name="del"> <button nam"del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button> </td> </tr> </tbody> </table> </div> </div> <div> <a id="add_row" class="btn btn-grey pull-right">Novo Item</a> </div> <div> <label for="name"> Anexo </label> <input type="file" id="fileselect" name="documentsasd" > </div> </form>
.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 cur_td = $(this); var children = cur_td.children(); // add new td and element if it has a nane if ($(this).data("name") != undefined) { var 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 { var 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: