Zellen Gruppe bei onMouseOver hinterlegen

[Koken]

hi,
Ich möchte eine Tabelle, in der alle Zellen, die der Gruppe angehören, der auch die Zelle angehört auf der sich die Maus befindet (oder geklickt wird), farblich hinterlegt werden.

Beispiel:
meine Tabelle:

Gruppe1   Gruppe3   Gruppe2   Gruppe5
   Gruppe2   Gruppe5   Gruppe1   Gruppe3
   Gruppe4   Gruppe2   Gruppe4   Gruppe5

die Maus ist auf der 1. Zelle in der 1. Zeile. Alle Zellen der Gruppe1 sollen jetzt hinterlegt werden.

meine Javascript Kenntnisse sind gering.
ich wäre für Hilfe sehr dankbar

[fastix®]

Moin!

meine Javascript Kenntnisse sind gering.

<tr style="background-color: silver" id="zeile_1" onmouseover="document.getElementById['zeile_1'].style.backgroundColor='green';" onmouseout="document.getElementById['zeile_1'].style.backgroundColor='silver';">
<td>Hallo</td>
<td>Welt!</td>
<tr>
<tr style="background-color: silver" id="zeile_2" onmouseover="document.getElementById['zeile_2'].style.backgroundColor='green';" onmouseout="document.getElementById['zeile_2'].style.backgroundColor='silver';">
<td>Hallo</td>
<td>Du!</td>
<tr>

ich wäre für Hilfe sehr dankbar

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Koken]

Wow!!! das ging schnell, war genau das was ich brauche und genau wie ich es brauche: einfach

aller besten Dank

[fastix®]

Moin!

Wow!!! das ging schnell, war genau das was ich brauche und genau wie ich es brauche: einfach

Allerdings ist es wohl doch nicht ganz die für Deinen Fall.

Gruppe1   Gruppe3   Gruppe2   Gruppe5
   Gruppe2   Gruppe5   Gruppe1   Gruppe3
   Gruppe4   Gruppe2   Gruppe4   Gruppe5

Du brauchst sowas:

<script type="text/javascript"><!--
  var gruppe=new Array();

/* Bestimmung der Gruppen */
  var gruppe[1]=new Array("z1_r1","z2_r3);
  var gruppe[2]=new Array("z1_r3","z2_r1);
  var gruppe[3]=new Array("z1_r2","z2_r3);
  ...

function m_over(gr,in_out) {
     for (var i=1; i<3; i++) {
       if (in_out == 1) {
         document.getElemementById[gruppe[gr][i]].style.backgroundColor="green";
       } else {
         document.getElemementById[gruppe[gr][i]].style.backgroundColor="blue";
     }
   }
//--></script>

Die Tabellenzellen sollten dann so aussehen:

<table>
<tr>
<td id="z1_r1" onmouseover="m_over(1,1)" onmouseout="m_over(1,0)">Gruppe 1</td>
<td id="z1_r2" onmouseover="m_over(3,1)" onmouseout="m_over(3,0)">Gruppe 3</td>
...
</tr>
...
<td id="z2_r3" onmouseover="m_over(1,1)" onmouseout="m_over('z1_r1',0)">Gruppe 1</td>
...

Die erste Zahl in der Klammer ist Deine Gruppennummer, die zweite ein Flag für mouse over und mouse out. Dadurch sparst Du die zweite Funktion.

Die Gruppen baust Du im Javascript bei Erstellen und Belegen des Arrays zusammen. Ich bin hier davon ausgegangen, dass jede Gruppe 2 Zellen hat.

Leider muss die Zusammenstellung der Gruppen schon beim Erstellen des Javascriptes bekannt sein. Das kann die Programmierung schwieriger machen, wenn die Daten aus einer DB kommen und serverseitig PHP oder ähnliches verwendet wird.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Gernot Back]

Hallo Koken,

da die Gruppen ja keinen Zeilen entsprechen wird fastix' ansatz wahrscheinlich nicht genau das sein, was du braucghst. Ich habe auch Zweifel, ob mein Ansatz valide ist, aber gib doch allen deinen Tabellenzellen mal ein name-Atribut, z.B. name="gruppeX" und dann kannst du sie ja, zumindest in einigen Browsern damit ansprechen, also:

function  hinterlegen (x){
  for(i=0; i<document.getElementsByName(x).length; i++)(
    document.getElementsByName('gruppeX)[i]style.backgroundColor='silver';
  }
}

<td name="gruppeX" onMouseover="hinterlegen(this.name)">inhalt</td>

Ich habe es nicht getestet, berichte, ob und in welchen Browsern es funktioniert!

Wenn du mit substring() arbeitest, kannst du statt dem name-Attribut auch den einzelnen Tabellenzellen ein eindeutiges id-Attribut geben, und entsprechend mit document.getElementById() arbeiten. Dann ist es wahrscheinlich auch valide.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

function  hinterlegen (x){
  for(i=0; i<document.getElementsByName(x).length; i++)(
    document.getElementsByName('gruppeX)[i]style.backgroundColor='silver';

Da darf natürlich nur x stehen----^^^^^^^^

}
}

Gruß Gernot

[Gernot Back]

und nochmal,

function  hinterlegen (x){
   for(i=0; i<document.getElementsByName(x).length; i++)(
     document.getElementsByName(x)[i].style.backgroundColor='silver';
   }
}

ich hatte den Punt vor style auch noch vergessen, also ".style.backgroundColor"

Gruß Gernot

[Cybaer]

Hi,

<td name="gruppeX" onMouseover="hinterlegen(this.name)">inhalt</td>

NAME ist kein gültiges Attribut für TD!

Ich habe es nicht getestet, berichte, ob und in welchen Browsern es funktioniert!

Funktioniert definitiv nicht in allen Browsern.

Problematisch ist nicht, daß NAME kein gültiges Attribut ist, problematisch ist, daß es dieses wichtige Attribut offiziell gibt und hier an unerlaubter Stelle eingesetzt wird.

Gruß, Cybaer

[Cybaer]

Hi,

hi,
Ich möchte eine Tabelle, in der alle Zellen, die der Gruppe angehören, der auch die Zelle angehört auf der sich die Maus befindet (oder geklickt wird), farblich hinterlegt werden.

1. http://Coding.vampirehost.de/Toggle einbinden.

Gruppe1   Gruppe3   Gruppe2   Gruppe5
   Gruppe2   Gruppe5   Gruppe1   Gruppe3
   Gruppe4   Gruppe2   Gruppe4   Gruppe5

2a) Den TDs IDs zuweisen (Gruppe1a, Gruppe1b, ...)

b) Alternativ (nicht erlaubt nach W3C, aber praktikabel, da IDs einzigartig sein müssen): Gruppen-IDs vergeben (<td gid="Gruppe1">).

die Maus ist auf der 1. Zelle in der 1. Zeile. Alle Zellen der Gruppe1 sollen jetzt hinterlegt werden.

3. In die TDs ein onMouseOver oder onClick einfügen, in dem toggle() angesprochen wird:

onMouseOver="toggle('back:blue','td:id','Gruppe1');"

(bei Variante b) mit "gid" lautet es natürlich nicht "td:id", sondern "td:gid", bzw., da "gid" in toggle() voreingestellt ist, einfach nur "td")

Nunmehr werden alle Zellen der "Gruppe1" blau gefärbt (alternativ kannst Du natürlich auch einen sonstigen CSS-Farbcode übergeben, z.B. back:#0000FF).

Gruß, Cybaer