表格内有两个表格的表格排序

Question

我需要为一个大表实现表排序，其中表结构如下，我使用Jquery进行简单的表排序但无法实现这种类型的结构。在这方面我非常需要帮助..

表结构如下：

<div id="div1" onmouseover="scroll();" style="overflow: auto; height: 400px;width: 990px;">
<table class="mainTable" style="z-index: -500" border="0px" bordercolor="white" width="1400px">
    <tbody>
    <tr >
    <td>
        <div style="width: 100%; overflow:hidden; ">
    <table class="headTable" border="0px" bordercolor="white" style="width: 1400px" height="14px">
    <tbody>
            <tr style="height:14px; width: 100%;text-align: center; font-family: Arial, Helvetica, sans- serif; font-size: 12px; font-weight: bold">
                <th style="width: 3%;">Login ID</th>
                <th style="width: 5%;">firstName</th>
            <th style="width: 5%;">lastName</th>
            <th style="width: 3%;">country</th>
            <th style="width: 5%;">role</th>    
            <th style="width: 8%;">role2</th>
            <th style="width: 6%;">role3</th>
            <th style="width: 8%;">role4</th>
            <th style="width: 6%;">role5</th>
            </tr>
        </tbody>
    </table>    
        </div>
    </td>
    </tr>   
    <tr>
    <td>        
         <DIV  id="div2"  style="position:absolute;width:1000px; height:355px; overflow-x: hidden;overflow-y: scroll; ">
    <table border="0px" bordercolor="white" width="1400px" >
    <tbody>
    <logic:iterate name="AdminForm" property="AdminList">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>               
    </logic:iterate>
    </tbody>    
    </table>
        </div>
    </td>   
    </tr>       
    </tbody>        
</table>
</div>

Answer 1

您应该使用Tablesorter 进行测试。

$("#myTable1").tablesorter();
$("#myTable2").tablesorter();