mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 10:51 Benutzername: Passwort: Auto-Login

Thema: Farbwechsel Tabellenzeile vom 04.08.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Farbwechsel Tabellenzeile
Autor Nachricht
Fuzy
Threadersteller

Dabei seit: 14.01.2003
Ort: PW
Alter: -
Geschlecht: Männlich
Verfasst Mi 04.08.2010 11:40
Titel

Farbwechsel Tabellenzeile

 Antworten mit Zitat Zum Seitenanfang
Hallo

folgendes Prob:
Ich habe eine Tabelle in die ich gern eine Lesehilfe per javascript einbauen möchte (changecolor on mouseover)
Ich aber verschiedene Zeilen Hintergrundfarben mit css definiert:

Logischerweise verschwindet bei der Zeile "dark" dann die richtige Hintergundfarbe. Kann ich das Script entsprechend ausbauen? Kann mir Jemand weiterhelfen?

Code:
table tbody tr.light{
   color:#666666;
   background-color:#F7F7F7;
   }

table tbody tr.dark{
   color:#666666;
   background-color:#E8E8E8;
   }


Code:
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#F19100';
tableRow.style.color = '#ffffff';
}
else
{
tableRow.style.backgroundColor = '#F7F7F7';
tableRow.style.color = '#808080';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>


HTML:
Code:

<tr class="light" onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('#');">

<tr class="dark" onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('#');">
  View user's profile Private Nachricht senden
safer-print

Dabei seit: 11.03.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 04.08.2010 12:04
Titel

Antworten mit Zitat Zum Seitenanfang
Versuch's mal so:
Code:

<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
  if (highLight) {
    tableRow.style.backgroundColor = '#F19100';
    tableRow.style.color = '#ffffff';
  } else {
    if (this.style.className == 'light') {
      tableRow.style.backgroundColor = '#F7F7F7';
      tableRow.style.color = '#666666';
    } else {
      tableRow.style.backgroundColor = '#E8E8E8';
      tableRow.style.color = '#666666';
    }
  }
}
</script>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Fuzy
Threadersteller

Dabei seit: 14.01.2003
Ort: PW
Alter: -
Geschlecht: Männlich
Verfasst Mi 04.08.2010 12:50
Titel

Antworten mit Zitat Zum Seitenanfang
safer-print hat geschrieben:
Versuch's mal so:
Code:

<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
  if (highLight) {
    tableRow.style.backgroundColor = '#F19100';
    tableRow.style.color = '#ffffff';
  } else {
    if (this.style.className == 'light') {
      tableRow.style.backgroundColor = '#F7F7F7';
      tableRow.style.color = '#666666';
    } else {
      tableRow.style.backgroundColor = '#E8E8E8';
      tableRow.style.color = '#666666';
    }
  }
}
</script>


danke, leider funktioniert es nicht. Die Zeilen bleiben jetzt eingefärbt.
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 04.08.2010 13:37
Titel

Antworten mit Zitat Zum Seitenanfang
warum nicht mit css?

tr.dark:hover td { background-color: red; }
tr.light:hover td { background-color: yellow; }
  View user's profile Private Nachricht senden
Fuzy
Threadersteller

Dabei seit: 14.01.2003
Ort: PW
Alter: -
Geschlecht: Männlich
Verfasst Mi 04.08.2010 22:49
Titel

Antworten mit Zitat Zum Seitenanfang
snuwie hat geschrieben:
warum nicht mit css?

tr.dark:hover td { background-color: red; }
tr.light:hover td { background-color: yellow; }



jeee, genau das hab ich gesucht! Danke

ps: css find ich toll *zwinker*
  View user's profile Private Nachricht senden
safer-print

Dabei seit: 11.03.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 05.08.2010 23:18
Titel

Antworten mit Zitat Zum Seitenanfang
Hi snuwie, die CSS-Lösung ist genau das Richtige. Nur kurz der Vollständigkeit halber:
Es muss natürlich heißen: tableRow.style.className == 'light' und nicht this.style.className == 'light'
Code:
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
  if (highLight) {
    tableRow.style.backgroundColor = '#F19100';
    tableRow.style.color = '#ffffff';
  } else {
    if (tableRow.style.className == 'light') {
      tableRow.style.backgroundColor = '#F7F7F7';
      tableRow.style.color = '#666666';
    } else {
      tableRow.style.backgroundColor = '#E8E8E8';
      tableRow.style.color = '#666666';
    }
  }
}
</script>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Galerie mit Farbwechsel
automatischer Farbwechsel
Flash: farbwechsel bei Mausbewegung
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB