Was ist die beste Art und Weise abwechselnd Zeilen in einer Tabelle zu formatieren?
https://stackoverflow.com/questions/474216
-
19-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Offensichtlich ist der eigentliche Stil der gerade / ungerade Zeilen werden über eine CSS-Klasse durchgeführt werden, aber was ist der beste Weg, um die Klasse zu den Zeilen „anhängen“? Ist ist besser, es in dem Markup zu setzen, oder ist es besser, es zu tun über clientseitige Javascript? Was ist besser und warum?
Der Einfachheit halber nehmen wir an, dass dies ein großer Tisch, 100 Zeilen, und dass das Farbschema wird abwechselnd gerade / ungerade Zeilen. Zusätzlich ist eine Art von JavaScript-Bibliothek, dies leicht tun kann an andere Stelle in der Seite benötigt und so der Aufwand für dieses Paket ist kein Faktor.
Das eigentliche Ziel dieser Frage zu bestimmen, welche Abwägungen auch beteiligt sind, wie, wie diese Abwägungen behandelt werden sollen, wie die Leistung auf den Server trifft, wenn die Seite unter Last getroffen wird (unter der Annahme eine dynamische Tabelle) , Bandbreite Treffer für Benutzer mit geringeren Verbindungsgeschwindigkeiten, semantischen Treffern durch zusätzlichen Layout-Code in dem HTML-Zugabe (die Idee dabei ist, dass HTML für Inhalt, CSS für das Layout ist, und Javascript ist wie der Inhalt sowie Controlling / augmentierenden verhält das Layout)
Lösung
Sie können dies tun, ziemlich leicht mit jQuery, etwa so:
$(function(){
$('tr:even').addClass('alternateClass');
$('tr:odd').addClass('mainClass');
});
Sie können die Wähler ein bisschen mehr in Frage kommen, wenn Sie dies nur tun, auf einer bestimmten Tabelle wollen, oder tun es auf ‚li‘ sowie Elemente.
Ich denke, das ist etwas sauberer und besser lesbar Client-Seite, als es in einigen serverseitigen Umgebungen sein würde,
Andere Tipps
ich es im Markup (Server-Seite) setzen würde. Es dauert der Server weniger als einer Millisekunde rowNum = (rowNum - 1) * -1 Es ist ein Haustier ärgern von mir zu vervollständigen, wenn eine Website, weil, wie viel Sie Javascript langsam ausgeführt wird.
, sagt Wie in den anderen Antworten, wird es auf einem großen Tisch auf der Client-Seite tut langsamer als auf der Server-Seite und kann nicht funktionieren, wenn der Benutzer Javascript deaktiviert hat.
Um jedoch einen JS-Framework wie jQuery macht es so einfach, dass es wirklich verlockend:
$(document).ready(function() {
$('.myTable tr:odd').addClass('alternateRow');
});
Eine Tabelle mit einer so großen Größe ich die Zeile Verarbeitung auf der Serverseite tun würde, mit PHP oder ähnlich wie gerade / ungerade Klassennamen für jede Zeile zu berechnen. Diese Lösung wird für die mit JavaScript arbeiten ausgeschaltet und wird viel mehr Leistung als jede JavaScript-Bibliothek Bearbeitung eines Tabellenelement dieser Größe sein.
In PHP würde die Logik in etwa so aussehen
foreach($rows as $i => $row) {
$class = ($i % 2 == 0) ? 'even' : 'odd';
}
Wenn Sie eine serverseitige Verarbeitung nicht tun kann, würde ich empfehlen, die JavaScript-Tags die Klasse für jede Zeile, anstatt die Manipulation der Stile direkt eingestellt haben. Auf diese Weise der Präsentation der CSS und Verhalten der JavaScript bleibt gelassen wird und wenn Sie die Art und Weise verändern sich die Klassen werden zu einem späteren Zeitpunkt die Präsentation Code generiert wird gleich bleiben.
Ich würde tun, um dieses zunächst serverseitige da die Client Javascript nicht aktiviert haben. Wenn Sie das Hinzufügen / Entfernen Reihen Client-Seite mit Javascript, dann können Sie auch die Möglichkeit haben, es nach dem Add auf dem Client zu tun / entfernen Ereignis abgeschlossen hat. So viel wie möglich, sollten Sie versuchen, Ihre Schnittstelle auch ohne Javascript verhalten zu haben, wenn Sie die Browser-Umgebung kontrollieren kann (sagen wir zum Beispiel in einem Intranet app, wo Sie benötigen können, dass es aktiviert sein).
Ein Tag, werden wir in der Lage sein verwenden reine CSS . Natürlich wurde dieser Teil der CSS-Spezifikation eingeführt 2001 und es ist immer noch nicht unterstützt. = (
Was Sie versuchen zu erfolgen kann sogar mit CSS3 getan werden:
tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }
Dies wird auch aufgeführt in der css3 Selektoren der w3 spec . Wenn Sie sich für die Kompatibilität suchen, Hinzufügen der Klasse Server-Seite oder durch Javascript, wäre eine viel bessere Lösung sein.
Es hängt von Ihrem Szenario. JavaScript basiert sein kann schneller eine Anzahl von Zeilen zu implementieren, wenn die Tabelle on-the-fly nicht erstellt wird. Wenn Sie sich dynamisch Ihre Tabelle erstellen, jedoch konnte man ziemlich leicht die Klasse für jede andere Zeile zu sein „row_alternate“ gesetzt - ich die Serverseite Methode vorziehen, wenn Sie befürchten, dass einige Benutzer nicht JavaScript kann <. / p>
Wenn Sie jede Art von Framework verwenden, ist dies in der Regel eine der ersten Funktionen, die sie enthalten.
Else gegoogelt ich für „jscript Tabelle wechselnden Farben“ und mehrere Dutzend Verbindungen zu Techniken bekam.
(abgesehen. Es ist schade, Entwickler nie Kredit für den Code bekommen sie hat nicht write)
ich die Klasse auf der Serverseite immer gelten, da sie gestreamt werden aus / zu der Seite, aber wenn Sie eine clientseitige haben-re Sortieren der Zeilen muss nun neu eingestuft werden.
fand ich eine gute Seite zu erklären, was Sie erreichen wollen jquery mit:
Hier ist der letzte Output- http://15daysofjquery.com/examples/zebra/code/demoFinal.php
Und hier ist die tutorial- http://15daysofjquery.com/examples/zebra/
Ich würde wirklich sagen, dass es hängt von der Situation. Wenn Sie durch die Daten Looping die Zeilen auf der Server-Seite zu erstellen, würde ich wahrscheinlich sagen, dass man es dort tun soll.
Dies wird viel komplizierter, wenn Sie die Zeilen mit Client-seitiges Script zu sortieren / neu ordnen werden beginnen. In diesem Fall, wenn es 100 Zeilen oder so könnte ich geneigt sein, es auf der onload-Event Client-Seite zu tun, denn zumindest auf diese Weisen Sie nicht Code duplizieren die Zeilenfarbe zu bestimmen. Ich gebe zu, es hängt wirklich von der Geschwindigkeit der es in diesem Fall. Ich würde es wahrscheinlich versuchen und sehen, ob die Leistung, bevor sie eine endgültige Entscheidung akzeptabel ist.
