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>

Please provide code. Putting links in a code block is not an acceptable alternative. — Blunderfest
– Blunderfest, Commented Oct 15, 2014 at 18:25

Community · Accepted Answer · 2017-05-23 10:33:35Z

0

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();
        }
    });

});

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Oct 15, 2014 at 19:56

Troy Gizzi

2,5191 gold badge17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

neooo Over a year ago

Yes, same what i want. But it's not working correctly. Suppose i drag state row to left side of name, Then it will create a new column ( as per your example), After that i am moving country row to bottom of state(bottom of newly created column) then it's not adding to the new row. So may be some modification needed or we need to use different approach.

Marc Bosse · Accepted Answer · 2014-10-15 19:16:28Z

-1

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();
});

answered Oct 15, 2014 at 19:16

Marc Bosse

702 silver badges6 bronze badges

10 Comments

Troy Gizzi Over a year ago

I don't think that's what the OP is trying to accomplish. Look at their second code block (the resulting HTML).

Marc Bosse Over a year ago

Just working with the information I've read. Things tend to get blurred in the explanation. Either way, this will work for sorting and dragging element around, whether the style is what he's looking for or not. Some minor tweaking and he shouldn't have any trouble.

Alvaro Montoro Over a year ago

This would be "teach a man to fish" if OP wanted fish, but OP wants a steak

Marc Bosse Over a year ago

Then where are your answers? :)

Alvaro Montoro Over a year ago

Really? Is that your argument? If somebody asks about A, you answer about A, not about B and then act "offended" if somebody points it out. Now, answering your question: I don't have an easy answer to OP's question; I can imagine a complex one using jQuery-UI drag-and-drop (not sortable). But I wouldn't publish it until a) I have it at least sketched, and b) I make sure it is what OP is asking about.

|

Collectives™ on Stack Overflow

Customize table with jquery

2 Answers 2

1 Comment

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related