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

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc...
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use...
Read more