jquery - テーブル内に 2 つのテーブルがあるテーブルの並べ替え

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();