嵌套表使用Jquery排序顺序

时间:2012-05-08 06:17:49

标签: jquery asp.net

我正在尝试使用Jquery重新排序内部html表行.html包含嵌套表。我需要在子表中重新排序子表行,并在父表本身重新排序父表行

我的表格层次结构是指以下链接http://jsfiddle.net/PcDPr/

我也使用嵌套的表插件......没有什么能帮到太多......我没有得到预期的结果。

我将不胜感激。

1 个答案:

答案 0 :(得分: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>
​

Jquery代码

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

​