Wechselnde Zeilenfarben in einer sortierbaren Tabelle

Ich verwende einen Tabellensortierer, um meine Tabellen auf der Clientseite zu 'bestellen'. Wenn ich jedoch eine Bestellung ändere, werden meine Zeilenfarben durcheinander gebracht.Wechselnde Zeilenfarben in einer sortierbaren Tabelle

hat jemand eine Lösung? (js unter Datei, wenn Sie wollen ‚es versuchen‘)

<!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>

Für sorttable.js http://www.kryogenix.org/code/browser/sorttable/

Quelle

2010-12-02 jpmyob

+1 für die längste Post auf Stackoverflow ... – pixelbobby

Ich sehe die JS-Datei nicht, aber Sie sollten auf jeden Fall die jQuery tablesorter plug-in betrachten. Es ist leicht, führt schnell auf dem Client aus und behandelt all Ihre Zebra-Striping/Custom CSS mit Sortierung. Es funktioniert auch mit einem pager add-in.

Quelle

2010-12-02 17:21:21 pixelbobby

+1. Ich habe das Plugin zum ersten Mal implementiert und es war großartig. Sortierbar, seitenweise (mit einem anderen Plugin), und Zebra-Striping nach der Sortierung. Wirklich schönes Plugin. – charliegriefer

OOPS - weiß nicht, wie die js fallen gelassen wurden ... hier 'tiz. – jpmyob

Nach der Sortierung Sie für die Zeilen, die Klassennamen neu zuordnen müssen sehen.

Quelle

2010-12-02 17:19:30

Mach dir keine Sorgen über Klassennamen oder irgendetwas. Tun Sie dies einfach in Ihrem css:

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

Quelle

2010-12-02 17:40:31

Brandon - Das ist die BOMB so weit wie prägnante und effiziente Code - und genau das, was ich suchte - leider funktioniert es nicht in IE ... und so sehr ich möchte unsere Kunden zwingen, FF zu verwenden, Ich brauche eine Lösung, die in beiden funktioniert ... Danke ... TONS .. – jpmyob

Dies hat sehr schlechte Browser-Unterstützung, wenn Sie sich für solche Dinge interessieren. – ubiquibacon

Wechselnde Zeilenfarben in einer sortierbaren Tabelle

Antwort

Verwandte Themen