並べ替え可能なテーブルの交互の列の色

StackOverflow https://stackoverflow.com/questions/4337778

  •  30-09-2019
  •  | 
  •  

質問

テーブルソーターを使用して、クライアント側のテーブルを「注文」しています。ただし、注文を変更すると、列の色が台無しになります。

誰かが解決策を持っていますか？ （「試してみたい」場合は以下のJSファイル）

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <title></title>
    <script type="text/javascript" src="js/sorttable.js"></script>
    <style type="text/css">
     table.sortable thead { background-color:#DF7C1B; color:#ffffff; font-weight:bold; font-size:12px;}
     .datatable-evenrow { background-color:#FFC68F;}
     .datatable-rowhighlight { background-color: #8E9DBE; }
     .datatable-labelrow { background-color:#EF943B; }
    </style>
    </head>
    <body>
    <table class="sortable" > 
        <thead>
        <tr class="datatable-labelrow" >
        <td class="">NAME</td>
        <td class="">CODE</td>
        <td class="">ADDRESS</td>
        <td class="">CITY</td>
        <td class="">STATE</td>
        <td class="">ZIP</td>
        <td class="">PHONE</td>
        <td class="">FAX</td>
    </tr>
    </thead>

    <tbody>
    <tr  onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>EC, INC</td>
        <td>234567</td>
        <td>222 street</td>
        <td>ELMHURST</td>
        <td>IL</td>
        <td>60000</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>EC, INC</td>
        <td>4322234</td>
        <td>702 road</td>
        <td>ELMHURST</td>
        <td>IL</td>
        <td>60000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>AAA AMERICA, INC</td>
        <td>1111112222222</td>
        <td>1458 avenue Ave</td>
        <td>ITASCA</td>
        <td>IL</td>
        <td>60143</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>Likeme & likeme P.C.</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>00000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>OFFICE STUFF, INC.</td>
        <td>3333444</td>
        <td>55555 Fifth Ave</td>
        <td>NY</td>
        <td>NY</td>
        <td>02020</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>RepServe Inc.</td>
        <td>54321</td>
        <td>P.O. Box 3099</td></td>
        <td>Heresville</td>
        <td>HR</td>
        <td>44000</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>SCHNEIDER'S SCHNOUSERS INC.</td>
        <td>654543</td>
        <td>3101 S. PACKERLAND DR.  P.</td>
        <td>Dog Town</td>
        <td>Delaware</td>
        <td>000077</td>
        <td>Dan D. Dog</td>
        <td>800-600-3366</td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>SIMPLE DISTRIBUTORS, LLC</td>
        <td>444</td>
        <td>235255 Drive Way</td>
        <td>CHICAGO</td>
        <td>IL</td>
        <td>60606</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>SIMPLE DISTRIBUTORS, LLC</td>
        <td>1234 </td>
        <td>xxxoooo</td>
        <td>DETROIT</td>
        <td>MI</td>
        <td>40606</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>AAA ,INC.</td>
        <td>83300</td>
        <td>OFFICEITEMS.COM</td>
        <td>SOUTH ELGIN</td>
        <td>IL</td>
        <td>60177</td>
        <td></td>
        <td></td>
    </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
        <td>BBB,INC.</td>
        <td>156302</td>
        <td>BBB.COM</td>
        <td>SOUTH ELGIN</td>
        <td>IL</td>
        <td>60177</td>
        <td></td>
        <td></td>
    </tr>
 <tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
        <td>CCC, INC</td>
        <td>305792</td>
        <td>333 ELKHART RD.</td>
        <td>GOSH</td>
        <td>SD</td>
        <td>76526</td>
        <td></td>
        <td></td>
        </tr>
 <tr onMouseOver="this.className='datatable-rowhighlight'"     onMouseOut="this.className=''" >
            <td>CCC</td>
            <td></td>
            <td>UPRIGHT</td>
            <td>P.O. BOX 228</td>
            <td>FL</td>
            <td>00000</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>

        <tfoot>
        <tr class="datatable-footerrow">
         <td colspan="10" class="datatable-footercell">Showing 1-x of x Records  </td>
        </tr>
        </tfoot>
    </table>
    </body>
    </html>

sorttable.jsについては、参照してください http://www.kryogenix.org/code/browser/sorttable/

役に立ちましたか？

解決

JSファイルは表示されませんが、間違いなく考慮する必要があります JQuery Tablesorterプラグイン. 。それは軽量で、クライアントで速く性能を発揮し、ソートですべてのゼブラストライピング/カスタムCSSを処理します。 aでも動作します ページャーアドイン.

他のヒント

クラスの名前などを心配しないでください。 CSSでこれを行うだけです：

table.sortable tbody tr:nth-child(even) td {
    background-color: #FFC68F;
}

ソートの後、行のクラス名を再割り当てする必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top