"Dynamic Tree table "
Bootstrap 3.0.0 Snippet by zebertooth

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div style="float:left"> <a id="add_row" class="btn btn-primary addnewrow pull-left">Add Colum <span class="glyphicon glyphicon-plus"></span> </a> </div> <table class="table table-bordered table-hover table-sortable" id="tab_logic"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> อันดับ </th> <th class="text-center"> ข้อความ </th> <th class="text-center"> Message </th> <th class="text-center"> จัดแนว </th> <th class="text-center"> ขนาดข้อความ </th> <th class="text-center"> รูปแบบ </th> <th class="text-center"> ประเภท </th> <th class="text-center"> สถานะ </th> <th class="text-center"> ลบ </th> </tr> </thead> <tbody> <tr id='addr0' data-id="0" class="hidden"> <td data-name="button"> <button type="button" class="btn btn-success row-addsub">Add</button> </td> <td data-name="name"> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td data-name="mail"> <textarea type="text" name='massage' placeholder='Description' class="form-control"></textarea> </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="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="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="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="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'></button> </td> </tr> </tbody> </table> <table name="errortitle"> </table> </div> </div> </div> <script> </script>
.table-sortable tbody tr { cursor: move; } input.add { -moz-border-radius: 4px; border-radius: 4px; background-color:#6FFF5C; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); box-shadow: 0 0 4px rgba(0, 0, 0, .75); }
$(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(); }); $('#tab_logic').on('click', "td button.row-remove", function() { var current = $(this).parents("tr"); if(current.attr('id')){ // Parent while(true){ var next = current.next(); if(next.length == 0 || next.attr('id')){ break; } next.remove(); } current.remove(); }else{ //child current.remove(); } }); $(tr).find('td button.row-addsub').on("click", function() { $( "tr" ).has( this ).after( '<tr><td></td><td><input type="text"/></td><td><input type="text"/></td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td><button class="btn btn-danger glyphicon glyphicon-remove row-remove"></button></td></tr>' ); }); }); // 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:

This is really cool. How would you add submit button to submit the text fields to a script or something?

acnewberry () - 1 year ago - Reply 0


Follow this link.

https://bootsnipp.com/user/snippets/WaQ7z

zebertooth (1) - 1 year ago - Reply 1


Thank you

acnewberry () - 1 year ago - Reply -1