<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> <div class="container"> <div class="row clearfix"> <div class=""> <h3>Product Attributes</h3> <table class="table table-bordered table-hover table-sortable table-striped" id="tab_logic"> <thead> <tr> <th class="text-center vcenter" style="width: 20px;"></th> <th style="width: 300px;">Label</th> <th>Description</th> <th class="text-center vcenter"></th> </tr> </thead> <tbody class="container-items tableForm"> <tr id='attr0' data-id="0" class="hidden"> <td data-name="sort" style="width: 20px;"> <span class="glyphicon glyphicon glyphicon-sort"></span> </td> <td data-name="label"> <input type="text" class="form-control" name="label[0]" placeholder="Product Attribute Description" maxlength="255"> </td> <td data-name="description"> <textarea class="form-control" rows="5" name="desc[0]" placeholder="Product Attribute Description"></textarea> </td> <td data-name="del" style="width: 90px;"> <button type="button" class="btn-remove btn btn-danger btn-xs row-remove"><span class="glyphicon glyphicon-minus"></span></button> </td> </tr> </tbody> </table> </div> <input type="hidden" name="serializedData" id="serializedData" value="default"/> <a id="add_row" class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus"></span> Add Product Attribute</a> </div> <div class="row clearfix"> <a id="submitData" class="btn btn-info"><span class="glyphicon glyphicon-save"></span> Submit Data Test</a><br/> <textarea id="debugSerialization" rows="4" cols="50"></textarea> </div> </div>

.table-sortable tbody tr td:first-child { cursor: move; } .table-sortable tbody tr td:last-child { text-align: center; }

$(document).ready(function() { $("#submitData").click(function(){ //put the serialized attributes data in the hidden input var fields = $( "#tab_logic tr:not(#attr0) :input" ); $("#serializedData").val(JSON.stringify(fields.serializeObject())); //DEBUGGING CODE //console.log(fields.serialize()); //console.log(fields.serializeArray()); console.log(fields.serializeObject()) $("#debugSerialization").val(JSON.stringify(fields.serializeObject())); //alert(JSON.stringify(fields.serialize())); //alert(JSON.stringify(fields.serializeArray())); //alert(JSON.stringify(fields.serializeObject())); }); $("#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: "attr"+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) { //alert(index); $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified, handle: 'td:first' }).disableSelection(); $(".table-sortable thead").disableSelection(); $("#add_row").trigger("click"); }); jQuery.fn.serializeObject = function() { var arrayData, objectData; arrayData = this.serializeArray(); objectData = {}; $.each(arrayData, function() { var value; if (this.value != null) { value = this.value; } else { value = ''; } if (objectData[this.name] != null) { if (!objectData[this.name].push) { objectData[this.name] = [objectData[this.name]]; } objectData[this.name].push(value); } else { objectData[this.name] = value; } }); return objectData; };