How to reorder table rows (drag-and-drop) along with their sub rows

Posted by Eirik Johansen on Stack Overflow See other posts from Stack Overflow or by Eirik Johansen
Published on 2010-06-07T18:19:17Z Indexed on 2010/06/07 18:22 UTC
Read the original article Hit count: 221

Filed under:
|
|

I have a table which looks like this (simplified for the example):

<table>
<tr class="lvl_1">
    <td>
    Level 1
    </td>
</tr>
<tr class="lvl_2">
    <td>
    Level 2
    </td>
</tr>
<tr class="lvl_3">
    <td>
    Level 3
    </td>
</tr>
<tr class="lvl_1">
    <td>
    Level 1
    </td>
</tr>
<tr class="lvl_2">
    <td>
    Level 2
    </td>
</tr>
<tr class="lvl_3">
    <td>
    Level 3
    </td>
</tr>

The content in the rows with the lvl_3 class are children of the previous lvl_2 row, and the lvl_2 rows are children of the previous lvl_1.

Had the data been a list, it would have looked something like this:

Level 1
-- Level 2
---- Level 3
Level 1
-- Level 2
---- Level 3

I'm not looking to implement drag-and-drop sorting functionality, make it possible to rearrange the level 1 and two rows. The tricky part is that once I start moving a row, the corresponding children (and grand-children, if any) should move along with it.

Is this even possible with the current markup, or do I have to rearrange the code?

Thanks in advance !

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about tables