Änderung der Tabelle Zeilen Hintergrundfarben mit JavaScript

Key Takeaways

• JavaScript kann verwendet werden, um die Hintergrundfarben der Tabelle dynamisch zu verändern und die Lesbarkeit zu verbessern, ohne jede zweite Zeile zu harten oder die HTML -Seite von einer Serveranwendung zu regenerieren.
• Eine Methode besteht darin, zwei Klassen für Hintergrundfarben in einem Stilelement zu definieren und dann JavaScript zu verwenden, um diese Klassen ungerade bzw. sogar Zeilen zuzuweisen.
• Eine komplexere Methode ermöglicht mehrere alternierende Farben mithilfe eines Arrays, das alle diese Farben enthält und Zeilen basierend auf ihrem Index zugewiesen wird.
• Eine endgültige Methode berechnet die Farbe in Abhängigkeit von der Anzahl der Zeilen in der Tabelle, der Startfarbe und eines bestimmten Faktors, wodurch ein Gradienteneffekt erzeugt wird. Diese Methode erfordert eine sorgfältige Berücksichtigung von Farbkombinationen, um die Lesbarkeit aufrechtzuerhalten.

Viele Websites, die tabellarische Daten aufweisen, verwenden alternierende Hintergrundfarben, um die Lesbarkeit dieser Daten zu erhöhen. Und als ich eine Seite entwickelte, wurde mir klar, dass ich das auch tun wollte. Das Problem? In meinem Fall wurde die Tabelle nicht von einer serverseitigen Anwendung oder einem Skript generiert, der Sie zahlreiche Beispiele im Web finden können.

Die offensichtliche Lösung bestand darin, jede zweite Zeile zu harten, um sicherzustellen, dass sie eine andere Hintergrundfarbe hatte. Aber ich wollte, dass die Tabelle dynamisch ist, so dass es möglich war, eine neue Zeile in der Mitte der Tabelle hinzuzufügen, ohne das Hintergrundfarbenattribut der folgenden Zeilen zu ändern.

Meine Lösung verwendet JavaScript, da CSS3 noch keine praktikable Option ist. Browser haben heute noch Schwierigkeiten, CSS1 und CSS2 zu unterstützen. Auch wenn HTML -Tabellen für das Webseitenlayout nicht empfohlen werden, eignen sie sich dennoch perfekt für die Präsentation von tabellarischen Daten. In diesem Tutorial präsentiere ich drei Beispiele, die auf derselben Idee basieren. Ich habe die Lösungen in IE6, Firefox 1.0, Mozilla 1.7.3 und Opera 7.54 nur auf der Windows -Plattform getestet.

Erste Schritte

Beginnen wir mit einer gewöhnlichen HTML -Tabelle. Ob die Tabelle Kopf-/Fußelemente enthält, spielt in diesem Fall keine Rolle:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Jetzt müssen wir überprüfen, ob der Browser ziemlich neu ist und über die erforderlichen JavaScript -Funktionen verfügt (d. H. W3C DOM -Unterstützung). Die folgende Zeile führt diese Prüfung durch und disqualifiziert Netscape 4 und andere dieser Generation. Solche Browser machen keinen Versuch, die Tabelle zu färben.

if(document.getElementById)

Beachten Sie auch, dass dieser Code all diesen Beispielen gemeinsam ist:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

Beispiel 1

Dieses erste Beispiel verwendet ein Stilelement, durch das wir zwei Klassen für Hintergrundfarben definiert haben:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Der Stil ist flexibel: Er könnte genauso gut etwas anderes definieren, wie das sollte in jeder zweiten Reihe kursiv angezeigt werden. Die vollständige Funktion sieht so aus:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

Hier, %, der Modulo -Operator, gibt uns den Rest in der Division.

Die obige Funktion sollte aus dem Onload -Ereignis des Body -Tags aufgerufen werden:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Das Ergebnis könnte ungefähr so ​​aussehen:

Beispiel 2

Gehen wir mit dem nächsten Beispiel fort - etwas abenteuerlustigeres. Anstatt nur zwei abwechselnde Farben zu verwenden, möchte ich mehrere verwenden. Fügen wir ein Array hinzu, das all diese Farben enthält.

Da eine begrenzte Anzahl von Farben in HTML einen definierten Namen hat, wechseln wir zu hexadezimalen Werten. Die resultierenden Farben bestehen aus drei Werten: Rot, Grün und Blau. Weiß wird erreicht, wenn alle drei Farben bei Max: #ffffff eingeschaltet werden. Das Gegenteil, schwarz, ist #000000.

if(document.getElementById)

Der Zeilen-Manipulations-Code umfasst nur eine einzelne Zeile, aber anstatt denselben Code zu kopieren und zu kleben, werden wir einen separaten Funktionsaufruf erstellen:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

Hier habe ich auch eine Funktion 1 hinzugefügt, beispielsweise 1 namens DoAlternate. Dies erleichtert es, zwischen den verschiedenen Methoden zu wechseln, mit denen wir die Zeilenfarben der Tabelle abwechseln können.

Wie in den obigen Fragmenten zu sehen, ist es möglich, den CSS -Klasse -Namen oder ein spezifisches Attribut eines HTML -Tags für die Zeilen festzulegen:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Das Ergebnis von Beispiel 2 könnte wie unten gezeigt angezeigt werden:

Beispiel 3

Das letzte Beispiel zeigt eine wirklich farbenfrohe Variante, in der die Farbe in Abhängigkeit von der Anzahl der Zeilen in der Tabelle, der Startfarbe und einem bestimmten Faktor berechnet wird.

Erstens müssen wir einige Variablen festlegen:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

Wir fügen jetzt eine neue Funktion hinzu, Dogradient.

<html> <br>
... <br>
<body onload="alternate('thetable')"> <br>
<table > <br>
<tr><td>...</td></tr> <br>
</table> <br>
...

Da die Farben berechnet werden, müssen wir sicherstellen, dass wir nicht aus dem Bereich gehen, die gültigen Werte von 0 bis 255 liegen. Das Farbargument ist nicht in RGB -Werte unterteilt. Daher müssen wir unter 16 Uhr polieren, wenn wir unter 16 gehen, sonst ist der Wert illegal. Wenn wir eine wirklich lange Tabelle oder einen großen Schrittewert haben, dreht sich der Gradient in die andere Richtung. In dieser Funktion ist der blaue Teil festgelegt und die anderen beiden werden modifiziert.

Die ToString -Methode ist sehr praktisch, wenn Sie in diesem Fall Zahlen - Dezimales in Hex, konvertieren müssen. Das Argument im ToString ist der Radix, dh. 2 für binär, 10 für dezimal und 16 für hex. Das Bild unten zeigt, wie die Tabelle in Firefox 1.0, IE6, Mozilla 1.7 und Opera 7.5 erscheint.

Achten Sie darauf, dass die Anzeige nicht zu farben wird - wir möchten immer noch die Lesbarkeit unserer tabellarischen Daten sicherstellen. Bei einigen Farbkombinationen kann es sogar notwendig sein, die Farbe des Tabellentextes mit so etwas zu ändern:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Schlussfolgerung

Verwenden von CSS und JavaScript ist es ziemlich einfach, die Lesbarkeit unseres Codes hinzuzufügen oder zu erhöhen, ohne die HTML -Seite von einer Serveranwendung regenerieren zu müssen. Wie wir hier gesehen haben, kann es auch auf statischen HTML -Seiten hinzugefügt werden. Um diese Beispiele in Aktion zu sehen, laden Sie die HTML -Datei mit dem Code herunter.

häufig gestellte Fragen (FAQs) zum Ändern von Hintergrundfarben in JavaScript

Wie kann ich die Hintergrundfarbe einer bestimmten Zeile in einer Tabelle mit JavaScript ändern? Hier ist ein Beispiel:

document.getElementById ("myrow"). Style.backgroundcolor = "red"; Sie können „rot“ durch einen gültigen Farbnamen oder Farbcode ersetzen.

Kann ich die Hintergrundfarbe mehrerer Zeilen gleichzeitig ändern? Sie können die QuerySelectorAll -Methode verwenden, um alle Zeilen auszuwählen, die Sie ändern möchten, und dann eine Schleife verwenden, um die Hintergrundfarbe jeder Zeile zu ändern. Hier ist ein Beispiel:

var rows = document.querySelectorAll (". Myrows"); Sie können „blau“ durch einen gültigen Farbnamen oder Farbcode ersetzen.

Wie kann ich die Hintergrundfarbe einer Zeile ändern, wenn ich darauf klicke? Hier ist ein Beispiel:

document.getElementById ("myrow"). Onclick = function () {

this.style.backgroundcolor = "green"; Sie können „grün“ durch einen gültigen Farbnamen oder Farbcode ersetzen.

Kann ich die Hintergrundfarbe einer Zeile basierend auf ihrem Inhalt ändern? Sie können die InnerHTML -Eigenschaft verwenden, um den Inhalt der Zeile zu erhalten, und dann eine IF -Anweisung verwenden, um die Hintergrundfarbe basierend auf dem Inhalt zu ändern. Hier ist ein Beispiel:

var row = document.getElementById ("myrow"); für. Sie können "Gelb" durch einen gültigen Farbnamen oder Farbcode ersetzen.

Wie kann ich die Hintergrundfarbe einer Zeile ändern, wenn ich darüber schwebe? Hier ist ein Beispiel:

#Myrow: Hover {
Hintergrundfarbe: Pink;
}
In diesem Beispiel ist „Myrow“ die ID der Zeile, die Sie ändern möchten. Sie können "Pink" durch einen gültigen Farbnamen oder Farbcode ersetzen. Sie können die ursprüngliche Farbe in einer Variablen speichern, bevor Sie sie ändern, und dann diese Variable verwenden, um die Farbe zurück zu ändern. Hier ist ein Beispiel:

var row = document.getElementById ("myrow");

var originalcolor = row.style.backgroundColor; "Myrow" ist die ID der Zeile, die Sie ändern möchten. Sie können „lila“ durch einen gültigen Farbnamen oder Farbcode ersetzen.

Wie kann ich die Hintergrundfarbe einer Zeile alle paar Sekunden ändern? Hier ist ein Beispiel:

var row = document.getElementById ("myrow"); Gibt eine zufällige Farbe zurück. Die Zahl 2000 ist das Intervall in Millisekunden (2000 Millisekunden = 2 Sekunden). Sie können eine IF -Anweisung verwenden, um den Zustand zu überprüfen und dann die Hintergrundfarbe zu ändern, wenn der Zustand wahr ist. Hier ist ein Beispiel:

var row = document.getElementById ("myrow");
if (somecondition) {
row.style Sie können "orange" durch einen gültigen Farbnamen oder Farbcode ersetzen.

Wie kann ich die Hintergrundfarbe einer Zeile ändern, wenn ich sie auswähle? Dieses Ereignis wird jedoch häufig für Tabellenzeilen verwendet, da es normalerweise für Texteingangsfelder verwendet wird. Ein häufigerer Ansatz besteht darin, die Hintergrundfarbe zu ändern, wenn Sie auf die Zeile klicken, wie in Frage 3.

erläutert

Kann ich die Hintergrundfarbe einer Zeile in einer bestimmten Spalte ändern? Sie können die CellIndex -Eigenschaft verwenden, um den Index der Spalte zu erhalten, und dann die Hintergrundfarbe der Zeile ändern, wenn der Index mit der spezifischen Spalte übereinstimmt. Hier ist ein Beispiel:

var row = document.getElementById ("myrow"); der spezifischen Spalte. Sie können "blaugrün" durch einen gültigen Farbnamen oder Farbcode ersetzen.

Das obige ist der detaillierte Inhalt vonÄnderung der Tabelle Zeilen Hintergrundfarben mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!