Question

I am trying to re order the inner html table rows using Jquery.inner html contains the nested tables . i need to reorder child table rows with in the child table and parent table rows reorder in the parent table itself

My table hierarchy is refer the following link http://jsfiddle.net/PcDPr/

i used nested table plugins also..nothing is helping much..i didn’t get expected results.

I would appreciate any help.

Answer 1

Hiya sample demo here: http://jsfiddle.net/T4Vh4/

To start with you are missing <th> tags in your example. I am given you a working sample so that you can compare your implementation of table sorter with the demo. :))

Please let me know if this is what you are looking for!

Good read: http://tablesorter.com/docs/

Hope this helps and have a nice one, d’uh don’t forget to accept the answer if this helps :)!

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Honda</td>
            <td>Accord</td>
        </tr>
        <tr class="expand-child">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table class="tablesorter-child">
                    <thead>
                        <tr>
                            <th>Doors</th>
                            <th>Colors</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Honda 2-Door</td>
                            <td>Honda Red</td>
                        </tr>
                        <tr>
                            <td>Honda 4-Door</td>
                            <td>Honda Blue</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>Toyota</td>
            <td>Camry</td>
        </tr>
        <tr class="expand-child">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table class="tablesorter-child">
                    <thead>
                        <tr>
                            <th>Doors</th>
                            <th>Colors</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Toyota 2-Door</td>
                            <td>Toyota Yellow</td>
                        </tr>
                        <tr>
                            <td>Toyota 4-Door</td>
                            <td>Toyota Green</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
​

Jquery code

$(document).ready(function() 
{ 
    $("table").tablesorter({selectorHeaders: '> thead > tr > th'}); 
});

​