HTML table with rowspan reorder item drag and drop issue

Question

my html code is

<table border='1px' id='sort'>
    <thead>
        <tr>
            <th>SL</th>
            <th>Sub Group</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan='3'>1</td>
            <td rowspan='3'>Fruit</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>pineapple</td>
        </tr>
        <tr>
            <td rowspan='2'>2</td>
            <td rowspan='2'>Flower</td>
            <td>Rose</td>
        </tr>
        <tr>
            <td>sunflower</td>
        </tr>
    </tbody>
</table>

and js

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;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

I want to reorder only subgroup like fruit mango,orange or sunflower,rose not the main group in the table. The working fiddle is http://jsfiddle.net/p6c814o6/. How to solve this issue. Thank you.

Can't you just make 1 table cell and then in that cell a sortable list? — rst, May 29 '15 at 06:27
That's a good idea. but when I add a new sub-group like `type of mango` then it will more difficult to show and the rowspan value actually come from database. That's why I want to keep this. Thank you. — Iftakharul Alam, May 29 '15 at 06:37

Rohit Arora · Accepted Answer · 2015-05-29T07:02:05.043

Try this:

I have updated your fiddle JsFiddle. Your html was wrong according to your code. You must check your new html. Instead Of using rowspans you must go with nested tables to achieve it.

<table border='1px' id='sort'>
    <thead>
        <tr>
            <th>SL</th>
            <th>Sub Group</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td >1</td>
            <td >Fruit</td>
            <td><table>
                <tr>
            <td>Mango</td>
        </tr>
                <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>pineapple</td>
        </tr></td>
        </tr>
        </table>
        <tr>
            <td >2</td>
            <td >Flower</td>
            <td><table>
                <tr>
                    <td>
                Rose
                    </td>
                </tr>
            <tr>
            <td>sunflower</td>
        </tr>
                </table>
            </td>

    </tbody>
</table>

Check out the updated fiddle. If this is what you need. Hope this helps JsFiddleUpdated

thanks but I want to reorder only the nested table not the main table. That was my requirement. — Iftakharul Alam, May 29 '15 at 06:56
Thank you. One last issue, How to get nested table `index` with `td` so that i can update it in database via ajax request. I tried `$( "#sort tbody tr td > table tbody" ).sortable( "serialize", { key: 'td' } );` which does not work — Iftakharul Alam, May 29 '15 at 12:41
Check this link. This might help you. http://stackoverflow.com/questions/2979643/jquery-ui-sortable-position. — Rohit Arora, Jun 01 '15 at 05:20

HTML table with rowspan reorder item drag and drop issue

1 Answers1