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
- Berechnungen mit dem Datum
- Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
- Zeitansage in JavaScript
- Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.
- SQLite-Datei mit PHP und PDO erstellen
- Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
- Dateibrowser
- Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Farbschema Kommentar-Box Blend-Mode Mauszeiger PHPMailer Responsiv Mausrad Sprachumschaltung AES Hover-Effekt Regenbogen Text Suchmaschine Webseitenschutz Silbentrennung ASCII Gästebuch Mnemonisches Passwort Metall-Effekt Generator Stoppwortliste Chatroom Audiodatei Tooltip SQLite Canvas Zugriffsrechte
Farbschema Kommentar-Box Blend-Mode Mauszeiger PHPMailer Responsiv Mausrad Sprachumschaltung AES Hover-Effekt Regenbogen Text Suchmaschine Webseitenschutz Silbentrennung ASCII Gästebuch Mnemonisches Passwort Metall-Effekt Generator Stoppwortliste Chatroom Audiodatei Tooltip SQLite Canvas Zugriffsrechte