javascript - Alternating row colors in a sortable table -
i'm using table sorter 'order' tables on client side. - when change order, row colors messed up.
does have solution? (js file below if want 'try it')
<!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> for sorttable.js see http://www.kryogenix.org/code/browser/sorttable/
i don't see js file, should consider jquery tablesorter plug-in. it's lightweight, performs fast on client, , handles zebra-striping/custom css sorting. works pager add-in.
Comments
Post a Comment