Alternierende Zeilenfarben in einer sortierbaren Tabelle
-
30-09-2019 - |
Frage
Ich verwende eine Tabelle Sorter ‚bestellt‘ meine Tabellen auf der Client-Seite. Allerdings -. Wenn ich eine Bestellung ändern, bekommen meine Zeilenfarben verkorkste
hat jemand eine Lösung? (Js Datei unten, wenn Sie möchten, ‚versuchen Sie es‘)
<!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 finden Sie unter http://www.kryogenix.org/code/browser/ sorttable /
Lösung
Ich sehe die JS-Datei nicht, aber Sie sollten auf jeden Fall die jQuery tablesorter Plug-In . Es ist leicht, führt schnell auf dem Client, und kümmert sich um alle Ihre Zebra-Striping / custom CSS mit Sortierung. Es funktioniert auch mit einem Pager Add-In .
Andere Tipps
Noch nicht einmal Sorgen über Klassennamen oder irgendetwas. Genau das tut dies in Ihrem CSS:
table.sortable tbody tr:nth-child(even) td {
background-color: #FFC68F;
}
Nach der Art müssen Sie neu ordnen die Klassennamen für die Zeilen.