2011-01-03 1 views
1

Normalerweise kennzeichne ich den ersten TD in einer Formularzeile mit einer "Header" -Klasse und den angrenzenden TD mit der Klasse "data".Keine CSS-Klassen für jeden TD zum Formatieren verwenden; Verwenden von JQuery

Statt all dies in dem HTML-Code zu schreiben ich die folgenden jQuery verwenden:

$("tr").find("td:eq(0)").addClass("header"); 
$("tr").find("td:eq(1)").addClass("data"); 

Ist das leistungsfähig?

+3

Warum verwenden Sie 'th' nicht für einen Tabellenkopf? –

+0

Nun, er sagt, dass der Header eine Zelle ist, die eine Zeile mit Daten teilt. Ich habe Schwierigkeiten, mir vorzustellen, wie diese Tabelle tatsächlich aussieht. – Sapph

+0

Leider ist die Kopfzeile eine Beschriftung/Beschriftung (ich verwende kein CSS, um meine Formulare zu strukturieren, da ich sie nicht richtig aussehen lassen kann). – Caveatrob

Antwort

1

Es wäre schneller und effizienter, CSS zu verwenden. Die folgenden CSS hätten den gleichen Effekt.

td:first-child {background-color:blue;} 
td:first-child + td {background-color:yellow;} 

Auch hängt davon ab, wie groß Ihr Tisch offensichtlich ist.

+0

Sieht aus wie weder IE7 noch IE8 dies unterstützen .. ist das richtig? – Caveatrob

+0

Nein, Sie haben nicht Recht. Es gibt volle Unterstützung für Geschwisterselektoren (td + td) in IE7 und IE8. Vollständige Unterstützung für den Pseudo-Selektor des ersten Kindes in IE8, teilweise in IE7. Stellen Sie sicher, dass Sie keine Kommentare vor Ihrem td haben, hier sind Referenzen, die Ihnen helfen können. http://www.communitymx.com/content/article.cfm?cid=3FAF0 und http://f6design.com/journal/2008/11/27/ie7-first-child-and-html-comments/ –

1

Effizient? Ja
Einfach zu lesen und zu unterstützen? Nicht so viel

0

Es ist offensichtlich effizienter in Bezug auf Platz im großen Maßstab. Weniger effizient für Benutzer, die Ihr Dokument anzeigen/ausführen, wenn eine Menge JavaScript vor der Anzeige ausgeführt werden muss.

0

Effizient genug.

Einige Möglichkeiten zur Optimierung:

  1. $("#someid tr").find... // the ID will narrow the scope of the search
  2. Können Sie die Datenklasse als einfach den Standard-TR Styling anwenden und dann die einzigartige TR als Header-Klasse spec?
0

Es hängt davon ab, wie Sie Effizienz definieren. Ist es weniger Code für Sie zu schreiben? Sicher.

Wird es im Browser schneller oder langsamer als normales CSS ausgeführt? In der Regel langsamer. Wie viel davon hängt vom Client-Browser sowie der Struktur und Größe der Tabelle ab.

Eine große Tabelle wird offensichtlich länger dauern, damit das Javascript ausgeführt wird. Groß in diesem Fall könnte Hunderte (oder Tausende) von Zeilen abhängig vom Browser sein. Länger könnte 500ms oder so bedeuten. Neuere Browser haben schnellere Javascript-Laufzeiten, so dass es nicht einmal auffällt.

Wenn Ihre Tabelle jedoch richtig strukturiert ist (z. B. Sie verwenden table-layout: fixed) und genau definierte Breiten haben (z. B. verwenden Sie keine Prozentsätze oder irgendetwas anderes, das eine Berechnung erfordert), dann die schnellstmögliche Methode des Renderns wäre, nur das Klassenattribut im HTML zu setzen.

Verwandte Themen