"Dynamic Sortable Tables"
Bootstrap 3.2.0 Snippet by ths93

<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 ----------> <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"> Country </th> <th class="text-center"> Online </th> <th class="text-center"> Essentials </th> <th class="text-center"> Business </th> <th class="text-center"> Enterprise </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="sel"> <select name="sel0" class="selectpicker" data-country="sms" data-live-search="true"> <option data-value="0.0480" data-content="<img width='24' height='24' src='/images/flags/nl.png'> Netherlands">Netherlands</option> <option data-value="0.0320" data-content="<img width='24' height='24' src='/images/flags/dz.png'> Algeria">Algeria</option> <option data-value="0.0390" data-content="<img width='24' height='24' src='/images/flags/ar.png'> Argentina">Argentina</option> <option data-value="0.0390" data-content="<img width='24' height='24' src='/images/flags/au.png'> Australia">Australia</option> <option data-value="0.0520" data-content="<img width='24' height='24' src='/images/flags/at.png'> Austria">Austria</option> <option data-value="0.0075" data-content="<img width='24' height='24' src='/images/flags/bh.png'> Bahrain">Bahrain</option> <option data-value="0.0508" data-content="<img width='24' height='24' src='/images/flags/be.png'> Belgium">Belgium</option> <option data-value="0.0100" data-content="<img width='24' height='24' src='/images/flags/ba.png'> Bosnia and Herzegovina">Bosnia and Herzegovina</option> <option data-value="0.0413" data-content="<img width='24' height='24' src='/images/flags/br.png'> Brazil">Brazil</option> <option data-value="0.0490" data-content="<img width='24' height='24' src='/images/flags/bg.png'> Bulgaria">Bulgaria</option> <option data-value="0.0038" data-content="<img width='24' height='24' src='/images/flags/ca.png'> Canada">Canada</option> <option data-value="0.0390" data-content="<img width='24' height='24' src='/images/flags/cl.png'> Chile">Chile</option> <option data-value="0.0209" data-content="<img width='24' height='24' src='/images/flags/cn.png'> China">China</option> <option data-value="0.0340" data-content="<img width='24' height='24' src='/images/flags/hk.png'> Hong Kong SAR China">Hong Kong SAR China</option> <option data-value="0.0413" data-content="<img width='24' height='24' src='/images/flags/co.png'> Colombia">Colombia</option> <option data-value="0.0272" data-content="<img width='24' height='24' src='/images/flags/hr.png'> Croatia">Croatia</option> <option data-value="0.0084" data-content="<img width='24' height='24' src='/images/flags/cy.png'> Cyprus">Cyprus</option> <option data-value="0.0340" data-content="<img width='24' height='24' src='/images/flags/cz.png'> Czech Republic">Czech Republic</option> <option data-value="0.0100" data-content="<img width='24' height='24' src='/images/flags/dk.png'> Denmark">Denmark</option> <option data-value="0.0366" data-content="<img width='24' height='24' src='/images/flags/eg.png'> Egypt">Egypt</option> <option data-value="0.0155" data-content="<img width='24' height='24' src='/images/flags/sv.png'> El Salvador">El Salvador</option> <option data-value="0.0490" data-content="<img width='24' height='24' src='/images/flags/ee.png'> Estonia">Estonia</option> <option data-value="0.0319" data-content="<img width='24' height='24' src='/images/flags/fi.png'> Finland">Finland</option> <option data-value="0.0440" data-content="<img width='24' height='24' src='/images/flags/fr.png'> France">France</option> <option data-value="0.0540" data-content="<img width='24' height='24' src='/images/flags/de.png'> Germany">Germany</option> <option data-value="0.0387" data-content="<img width='24' height='24' src='/images/flags/gr.png'> Greece">Greece</option> <option data-value="0.0499" data-content="<img width='24' height='24' src='/images/flags/hu.png'> Hungary">Hungary</option> <option data-value="0.0112" data-content="<img width='24' height='24' src='/images/flags/is.png'> Iceland">Iceland</option> <option data-value="0.0051" data-content="<img width='24' height='24' src='/images/flags/in.png'> India">India</option> <option data-value="0.0214" data-content="<img width='24' height='24' src='/images/flags/id.png'> Indonesia">Indonesia</option> <option data-value="0.0140" data-content="<img width='24' height='24' src='/images/flags/ir.png'> Iran">Iran</option> <option data-value="0.0178" data-content="<img width='24' height='24' src='/images/flags/ie.png'> Ireland">Ireland</option> <option data-value="0.0550" data-content="<img width='24' height='24' src='/images/flags/it.png'> Italy">Italy</option> <option data-value="0.0490" data-content="<img width='24' height='24' src='/images/flags/jp.png'> Japan">Japan</option> <option data-value="0.0122" data-content="<img width='24' height='24' src='/images/flags/jo.png'> Jordan">Jordan</option> <option data-value="0.0178" data-content="<img width='24' height='24' src='/images/flags/ke.png'> Kenya">Kenya</option> <option data-value="0.0270" data-content="<img width='24' height='24' src='/images/flags/kr.png'> South-Korea">South-Korea</option> <option data-value="0.0060" data-content="<img width='24' height='24' src='/images/flags/lt.png'> Lithuania">Lithuania</option> <option data-value="0.0225" data-content="<img width='24' height='24' src='/images/flags/my.png'> Malaysia">Malaysia</option> <option data-value="0.0122" data-content="<img width='24' height='24' src='/images/flags/mt.png'> Malta">Malta</option> <option data-value="0.0340" data-content="<img width='24' height='24' src='/images/flags/mx.png'> Mexico">Mexico</option> <option data-value="0.0380" data-content="<img width='24' height='24' src='/images/flags/ma.png'> Morocco">Morocco</option> <option data-value="0.0590" data-content="<img width='24' height='24' src='/images/flags/nz.png'> New Zealand">New Zealand</option> <option data-value="0.0080" data-content="<img width='24' height='24' src='/images/flags/ng.png'> Nigeria">Nigeria</option> <option data-value="0.0390" data-content="<img width='24' height='24' src='/images/flags/no.png'> Norway">Norway</option> <option data-value="0.0286" data-content="<img width='24' height='24' src='/images/flags/om.png'> Oman">Oman</option> <option data-value="0.0084" data-content="<img width='24' height='24' src='/images/flags/pk.png'> Pakistan">Pakistan</option> <option data-value="0.0178" data-content="<img width='24' height='24' src='/images/flags/pe.png'> Peru">Peru</option> <option data-value="0.0155" data-content="<img width='24' height='24' src='/images/flags/ph.png'> Philippines">Philippines</option> <option data-value="0.0316" data-content="<img width='24' height='24' src='/images/flags/pl.png'> Poland">Poland</option> <option data-value="0.0438" data-content="<img width='24' height='24' src='/images/flags/pt.png'> Portugal">Portugal</option> <option data-value="0.0390" data-content="<img width='24' height='24' src='/images/flags/ro.png'> Romania">Romania</option> <option data-value="0.0225" data-content="<img width='24' height='24' src='/images/flags/ru.png'> Russian Federation">Russian Federation</option> <option data-value="0.0200" data-content="<img width='24' height='24' src='/images/flags/sa.png'> Saudi Arabia">Saudi Arabia</option> <option data-value="0.0108" data-content="<img width='24' height='24' src='/images/flags/rs.png'> Serbia">Serbia</option> <option data-value="0.0122" data-content="<img width='24' height='24' src='/images/flags/sg.png'> Singapore">Singapore</option> <option data-value="0.0440" data-content="<img width='24' height='24' src='/images/flags/sk.png'> Slovakia">Slovakia</option> <option data-value="0.0150" data-content="<img width='24' height='24' src='/images/flags/si.png'> Slovenia">Slovenia</option> <option data-value="0.0190" data-content="<img width='24' height='24' src='/images/flags/za.png'> South Africa">South Africa</option> <option data-value="0.0590" data-content="<img width='24' height='24' src='/images/flags/es.png'> Spain">Spain</option> <option data-value="0.0260" data-content="<img width='24' height='24' src='/images/flags/se.png'> Sweden">Sweden</option> <option data-value="0.0320" data-content="<img width='24' height='24' src='/images/flags/ch.png'> Switzerland">Switzerland</option> <option data-value="0.0290" data-content="<img width='24' height='24' src='/images/flags/tw.png'> Taiwan">Taiwan</option> <option data-value="0.0178" data-content="<img width='24' height='24' src='/images/flags/tr.png'> Turkey">Turkey</option> <option data-value="0.0084" data-content="<img width='24' height='24' src='/images/flags/ug.png'> Uganda">Uganda</option> <option data-value="0.0283" data-content="<img width='24' height='24' src='/images/flags/ua.png'> Ukraine">Ukraine</option> <option data-value="0.0187" data-content="<img width='24' height='24' src='/images/flags/ae.png'> United Arab Emirates">United Arab Emirates</option> <option data-value="0.0280" data-content="<img width='24' height='24' src='/images/flags/gb.png'> United Kingdom">United Kingdom</option> <option data-value="0.0023" data-content="<img width='24' height='24' src='/images/flags/us.png'> United States of America">United States of America</option> <option data-value="0.0255" data-content="<img width='24' height='24' src='/images/flags/uy.png'> Uruguay">Uruguay</option> <option data-value="0.0073" data-content="<img width='24' height='24' src='/images/flags/ve.png'> Venezuela">Venezuela</option> </select> </td> <td data-name="name" class="cm-padding-check">€ <span data-total-amount="sms" data-discount="1.0">4.80</span></td> <td data-name="mail" class="cm-padding-check">€ <span data-total-amount="sms" data-discount="0.95">4.56</span></td> <td data-name="desc" class="cm-padding-check">€ <span data-total-amount="sms" data-discount="0.90">4.32</span></td> <td data-name="desc" class="cm-padding-check">€ <span data-total-amount="sms" data-discount="0.90">5.32</span></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>
.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: