Customize table with jquery

Question

I want to design a customize table layout. For example after adding data my table is created. Now I am showing column name in one column and column data in another column, I want to add functionality if I drag one row to third column, Then column structure will be modified and that row will be added to new column.

For example: This is my table: jsfiddle.net/x8L57md2/

code:-

            <tr>

                <td>Name</td>
                <td> Ankur </td>
            </tr>

            <tr>
                <td>Address</td>
                <td>jaipur</td>
            </tr>
            <tr>
                <td>State</td>
                <td> Rajasthan</td>
            </tr>
            <tr>
                <td>Country</td>
                <td>India</td>
            </tr>

          <table>

If I move state column to right side of ankur(name) then another table column will be created and append it to table with data.

Like this: jsfiddle.net/ttzr2ezh/

code:-

           <table border="1">

            <tr>

                <td>Name</td>
                <td> Ankur </td>
                <td>State</td>
                <td> Rajasthan</td>
            </tr>

            <tr>
                <td>Address</td>
                <td>jaipur</td>
            </tr>

            <tr>
                <td>Country</td>
                <td>India</td>
            </tr>

          <table>

Answer 1

Dragging tr elements is a little tricky. Here's a modified version of a clever approach from a different post. You can view a fully working JSFiddle here: http://jsfiddle.net/xwyoe0y9/

// make sure you reference jQuery and jQuery UI

$(document).ready(function() {

    var dragInfo = {};

    $('table.rearrangeable tr').draggable({
        helper: 'clone',
        start: function(event, ui) {
            dragInfo.tr = this;
            dragInfo.helper = ui.helper;
        }
    });

    $('table.rearrangeable tr').droppable({
        drop: function(event, ui) {
            var tr = ui.draggable;
            $(this).append(dragInfo.tr.innerHTML);

            $(dragInfo.tr).remove();
            $(dragInfo.helper).remove();
        }
    });

});

Answer 2

Look up jQuery UI, there is simple functionality for making a UI item 'sortable'.

With this new library installed you just need to label the rows or individual elements and in Javascript make them 'sortable'.

HTML:

<table>
   <tr class='makeSortable'>
      <td>Element1-Title</td>
      <td>Element1</td>
   </tr>
   <tr class='makeSortable'>
      <td>Element2-Title</td>
      <td>Element2</td>
   </tr>
   <tr class='makeSortable'>
      <td>Element3-Title</td>
      <td>Element3</td>
   </tr>
</table>

Javascript:

$(function() {
    $( ".makeSortable" ).sortable();
    $( ".makeSortable" ).disableSelection();
});