jquery - Jquery を使用した入れ子になったテーブルの並べ替え順序

Question

Jquery.inner html contains the nested tables を使用して、内側の html テーブルの行を並べ替えようとしています。子テーブルで子テーブルの行を並べ替える必要があり、親テーブルの行は親テーブル自体で並べ替えます

私のテーブル階層は次のリンクを参照してください http://jsfiddle.net/PcDPr/

ネストされたテーブルプラグインも使用しました..何も役に立ちません..期待した結果が得られませんでした。

助けていただければ幸いです。

Answer 1

Hiyaサンプル デモはこちら: http://jsfiddle.net/T4Vh4/

まず<th>、例にタグがありません。テーブルソーターの実装をデモと比較できるように、実際のサンプルが提供されています。:))

これがあなたが探しているものかどうか教えてください！

よく読んでください：http://tablesorter.com/docs/

これがお役に立てば幸いです。これが役立つ場合は、答えを受け入れることを忘れないでください:)!

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>
​

Jクエリコード

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

​