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="#FFFF8C";
}

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

Spalten einer Tabelle dynamisch ändern
Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
10 Regeln zu Dateinamen
Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
Diese Schlagwörter könnten Sie interessieren:
MySQL Gästebuch Berechnungen Wasserzeichen Lokaler Webserver Veranstaltungsliste Dateibrowser Suchmaschine Zeitfunktionen Sicherheit SQLite Formulare RSS Feed Dynamische Seiten PHP-Fehlermeldungen Counter Zebra-Tabelle PHPMailer Quelltext Webseitenschutz