javascript - Alternating row colors in a sortable table

I'm using a table sorter to 'order' my tables on the client side. However - when I change an order, my row colors get messed up.

does anyone have a solution? (js file below if you want to 'try it')

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".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>

For sorttable.js see /

I'm using a table sorter to 'order' my tables on the client side. However - when I change an order, my row colors get messed up.

does anyone have a solution? (js file below if you want to 'try it')

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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>

For sorttable.js see http://www.kryogenix/code/browser/sorttable/

Share Improve this question edited Jul 3, 2016 at 11:42 sth 230k56 gold badges287 silver badges370 bronze badges asked Dec 2, 2010 at 17:15 j-p 3,8289 gold badges56 silver badges97 bronze badges

+1 for the longest post on stackoverflow... – pixelbobby Commented Apr 28, 2011 at 13:23

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

I don't see the JS file, but you should definitely consider the jQuery tablesorter plug-in. It's lightweight, performs fast on the client, and handles all your zebra-striping/custom css with sorting. It also works with a pager add-in.

Don't even worry about class names or anything. Just do this in your css:

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

After the sort you need to re-assign the class names for the rows.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Alternating row colors in a sortable table - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)