Zeilen in HTML-Tabellen mit einem Klick hervorheben

Wenn Sie Webseiten in HTML erstellen, können Sie JavaScript-Funktionen verwenden, um das Erscheinungsbild von Seitenelementen bei Benutzerinteraktionen zu ändern. Um bestimmte Zeilen in einer Tabelle hervorzuheben, können Sie Cascading Style Sheet-Deklarationen für diese Zeilen in ihrem normalen Status und in ihrem hervorgehobenen Status festlegen. Durch Hinzufügen eines Ereignis-Listener-Attributs zu den Zeilenelementen kann Ihre Seite eine JavaScript-Funktion aufrufen, um onclicks auszuführen, die Klassennamensattribute des Elements dynamisch zu ändern und anschließend das Erscheinungsbild zu ändern.

1

Erstellen Sie Ihre HTML-Tabelle. Fügen Sie der Webseite-Datei den folgenden Beispiel-Markup-Code hinzu:

Diese Tabelle enthält zwei Zeilen mit jeweils drei Spalten. Jede der Zellen enthält eine Zahl zur Demonstration. Sie können jedoch auch beliebigen Inhalt in Ihre eigene Seite einfügen.

2

Fügen Sie im Kopfbereich Ihrer Seite einen Abschnitt für CSS hinzu. Fügen Sie zwischen den öffnenden und schließenden head-Tags in Ihrer Datei die folgende CSS-Code-Gliederung hinzu:

Dieser Code legt fest, dass die Tabellenzeilen standardmäßig einen weißen Hintergrund haben und der Benutzer beim Klicken auf einen roten Hintergrund. Sie können diese Einstellungen ändern, um den Stil Ihrer eigenen Seite wiederzugeben. Wenn der Benutzer die Seite zum ersten Mal anzeigt, werden die normalen CSS-Einstellungen angewendet, wie durch die Attribute der Tabellenzeilenklassen im ursprünglichen HTML-Code angegeben.

3.

Fügen Sie einen Abschnitt für JavaScript in Ihrem Seitenkopf hinzu. Fügen Sie zwischen den öffnenden und schließenden Head-Tags in Ihrer Datei den folgenden Code ein:

Dadurch werden ein Skriptabschnitt und eine Funktionsgliederung erstellt. Der Browser ruft diese Funktion auf, wenn der Benutzer auf eine Tabellenzeile klickt und den ID-Attributwert der angeklickten Zeile übergibt, damit das Skript sie identifizieren kann.

4

Ändern Sie den Klassennamen Ihrer Tabellenzeilenelemente. Wenn die Funktion ausgeführt wird, bedeutet dies, dass der Benutzer auf ein Zeilenelement geklickt hat. Fügen Sie den folgenden Code in Ihre JavaScript-Funktion ein und beziehen Sie einen Verweis auf das Tabellenzeilenelement auf der Seite: var row = document.getElementById (rowID);

Fügen Sie die folgende Zeile hinzu, um eine String-Kopie des aktuellen Klassennamens Ihres Tabellenzeilenelements zu erhalten: var curr = row.className;

Fügen Sie eine Bedingungsanweisung hinzu, um das Erscheinungsbild Ihrer Tabellenzeile anzupassen: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normal";

Wenn Ihre Tabellenzeile derzeit als normal festgelegt ist, ändert die Funktion sie, um den Status hervorzuheben. Wenn es aktuell markiert ist, wird es durch die Funktion wieder normal angezeigt. Dadurch wird ein Umschalteffekt erzeugt, wobei der Hervorhebungsstatus jedes Mal wechselt, wenn der Benutzer auf die Zeile klickt.

5

Speichern Sie Ihre Datei und öffnen Sie die Seite in einem Webbrowser-Programm. Testen Sie die Seite, indem Sie wiederholt auf die Zeilen klicken. Die Hintergrundfarbe sollte sich jedes Mal ändern, wenn Sie auf eine Zeile klicken. Wenn die Seite beim Klicken die Zeilen nicht hervorhebt, überprüfen Sie Ihren Code und öffnen Sie ihn erneut. Erweitern Sie den Code, um die Ebene der Hervorhebung und Präsentation anzugeben, die Ihre Site haben soll.

Spitze

• Durch Hinzufügen zu Ihrem CSS-Code können Sie die Textfarbe und andere Eigenschaften Ihrer Tabellenzeilen in jedem Status bestimmen.

Warnung

• JavaScript und CSS haben in allen Browsern unterschiedliche Ergebnisse, daher ist das Testen unbedingt erforderlich.