"Dynamic Sortable Tables"
Bootstrap 3.2.0 Snippet by olguitac

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <head> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> </head> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-1"> <button type="button" class="btn btn-primary btn-circle btn-lg" title="Regresar"><i class="glyphicon glyphicon-arrow-left" ></i></button> </div> <div class="col-md-8"> <label class="control-label" for="textinput"><legend><FONT SIZE=6>Lotes por Liquidar</font></legend></label> </div> </div> </div> </div> <div class="table-responsive"> <table class="table table-hover" id="dev-table"> <thead> <tr> <th>Proveedor</th> <th>Color</th> <th>Fecha Recepción</th> <th>Lbs Remitidas</th> <th>Lbs Procesadas</th> <th>Lbs x Liquidar</th> <th>Estado</th> </tr> </thead> <tbody> <tr> <td>LIMBOMAR S.A.</td> <td>A2</td> <td>24/05/2016</td> <td>3,000</td> <td>1,200</td> <td>1,800</td> <td>Proceso</td> </tr> </tbody> </table> </div> <!-- </div> </div> --> <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"> Cód. Producto </th> <th class="text-center"> Producto </th> <th class="text-center"> Talla </th> <th class="text-center"> Cantidad </th> <th class="text-center"> Libras </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="cod_producto"> <input type="text" name='txt_codProducto' placeholder='Cód. Producto' class="form-control"/> </td> <td data-name="producto"> <label class="form-control" for="textinput" placeholder='Nombre Producto' name='lbl_Producto'></label> </td> <td data-name="talla"> <label class="form-control" for="textinput" placeholder='Tarea' name='lbl_talla'></label> </td> <td data-name="cantidad"> <input type="text" name='txt_cantidad' placeholder='Cantidad' class="form-control"/> </td> <td data-name="Libras"> <label class="form-control" for="textinput" placeholder='Libras' name='lbl_libras'></label> </td> <td data-name="del"> <button nam"del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button> </td> </tr> </tbody> </table> </div> </div> <a id="add_row" class="btn btn-default pull-right">Add Row</a> </div> </div> <!-- <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>-->
.table-sortable tbody tr { cursor: move; } /********************************************************************************************************************/ .row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading div { margin-top: -18px; font-size: 15px; } .panel-heading div span{ margin-left:5px; } .panel-body{ display: none; } /********************************************************************************************************************/ /*css para boton atrás*/ body{margin:40px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; }
$(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

Black Dashboard
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Pricing Tables

Questions / Comments:

Hello , thank you for sharing your code really is helping me a lot. But I have a question and hope you can clarify it for me :
How can I boot screen already filled with a few lines? For example : In the case of an issue where some lines have already registered .
Thank you.

Adriano Gaspar da Silva () - 7 years ago - Reply 0