Mouseover in Tabellen
Dieses JavaScript ändert die Hintergrundfarbe wenn der Mauszeiger
über einen Tabellenbereich fährt.
Besonders bei großen Tabellen ist diese Funktion nützlich.
Demo
Name | Alter | Land |
---|---|---|
Jörg | 17 | Deutschland |
Sabine | 15 | Österreich |
Lars | 18 | Schweden |
Urs | 16 | Schweiz |
Jacek | 15 | Polen |
Florence | 14 | Frankreich |
Quelltext:
<script> function ein(x) { document.getElementById(x).style.backgroundColor="##80BFFF"; } function aus(x) { document.getElementById(x).style.backgroundColor="transparent"; } </script> <table border="1"> <tr> <th> Name </th> <th> Alter </th> <th> Land </th> </tr> <tr id="1" onMouseOver="ein('1');" onMouseOut="aus('1');"> <td> Jörg </td> <td> 17 </td> <td> Deutschland </td> </tr> <tr id="2" onMouseOver="ein('2');" onMouseOut="aus('2');"> <td> Michaela </td> <td> 15 </td> <td> Schweiz </td> </tr> <tr id="3" onMouseOver="ein('3');" onMouseOut="aus('3');"> <td> Markus </td> <td> 18 </td> <td> Österreich </td> </tr> </table>
Wenn die Tabelle keinen farbigen Hintergrund hat, fügen Sie die Angabe transparent hinzu. Und bei einer farbigen Tabelle, fügen Sie die Tabellenhintergrundfarbe hinzu.
Im folgenden Beispiel wird auch der Tabellenkopfbereich (<th></th>) markiert.
Beispiel 2
Name | Alter | Land |
---|---|---|
Jörg | 17 | Deutschland |
Sabine | 15 | Österreich |
Lars | 18 | Schweden |
Urs | 16 | Schweiz |
Jacek | 15 | Polen |
Florence | 14 | Frankreich |
Quelltext
<script> function hor_ein(x) { document.getElementById(x).style.backgroundColor="#FFFF8C"; } function hor_aus(x) { document.getElementById(x).style.backgroundColor="transparent"; } function ver_ein(x) { document.getElementById(x).style.backgroundColor="#FFFF8C"; } function ver_aus(x) { document.getElementById(x).style.backgroundColor="transparent"; } </script> <table border="1"> <tr> <th id="A"> Name </th> <th id="B"> Alter </th> <th id="C"> Land </th> </tr> <tr id="aa" onMouseOver="hor_ein('aa');" onMouseOut="hor_aus('aa');"> <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Jörg </td> <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 17 </td> <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Deutschland </td> </tr> <tr id="bb" onMouseOver="hor_ein('bb');" onMouseOut="hor_aus('bb');"> <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Michaela </td> <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 15 </td> <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Schweiz </td> </tr> <tr id="cc" onMouseOver="hor_ein('cc');" onMouseOut="hor_aus('cc');"> <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Markus </td> <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 18 </td> <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Österreich </td> </tr> </table>
Tipps
- Webseiten schneller machen
- Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.
- Hinzufügen von Wasserzeichen beim hochladen eines Bildes
- Ein Wasserzeichen ist die beste Option, um das Bild vor Diebstahl oder der Wiederverwendung durch eine andere Person zu schützen. Sie können den Besitz anzeigen, indem Sie dem Bild Wasserzeichen hinzufügen. Das Wasserzeichen hilft, den Ersteller zu identifizieren.
- Suchanfrage an eine Datenbank über AJAX senden und empfangen
- Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
- Umstellung von der PHP-Funktion mysql() zu mysqli()
- Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Zebra-Tabelle Datenschutz-Hinweis Diashow Animierte Sternebewertung Audiodatei Bausteine Regenbogen Text Hover-Effekt Kalenderwoche AES Sprachumschaltung Chatroom Marquee Blätterfunktion Backdrop-Filter Kommentar-Box Canvas Inhaltsverzeichnis Mehrfachauswahl Counter Formulare ToDo-Liste SQLite Mauszeiger Wecker
Zebra-Tabelle Datenschutz-Hinweis Diashow Animierte Sternebewertung Audiodatei Bausteine Regenbogen Text Hover-Effekt Kalenderwoche AES Sprachumschaltung Chatroom Marquee Blätterfunktion Backdrop-Filter Kommentar-Box Canvas Inhaltsverzeichnis Mehrfachauswahl Counter Formulare ToDo-Liste SQLite Mauszeiger Wecker