Row selektieren (Rahmen) in Zebratabelle. Wie?

[thunderstorm]

Hi Folks,
Ich habe folgendes Problem. IST Zustand ist eine Page mit einer Tabelle. Die formatierung geht 100% über CSS und es gibt TableHeader, TableRowEven und auch TableRowOdd Zeilen (abwechslungsweise zwei unterschiedliche Hintergrundfarben).
Browser ist MSIE6 (ist von der Geschäftsleitung so vorgegeben).
Nun kommt ein Change Request dass es beim anwählen oder eine aktivierten Zeile einer Tabelle einen Rahmen um diese sichtbar werden soll.
Im Moment funktioniert es aber nur dann, wenn man eine einzige Zelle pro Zeile hat und das Script wird dann bei der TD (onClick) ausgelöst.

Jetzt habe ich (weil kein Javascript Spezialist) 2 Probleme/Fragen:

1.) Laufen tut es zwar aber sobald ich eine Tabelle mit abwechslungsweisen Hintergrundfarben habe muss ich da etwas einbauen, dass mir die richtige Klasse (Odd oder Even) ausliest und dementsprechend mit der richtigen Klasse ersetzt. Wie erwähnt bin ich nicht der Profi. Nur dass es wohl eine Abfrage werden soll wie die Klasse heisst, meine ich zu erahnen, und wenn beispielsweise "waTableRowEven" als String zurück kommt dann müsste dieser mit der Klasse "waTableRowEvenSelected" ersetzt werden usw.
Aber ich habe die richtige Methode nicht gefunden und/oder die Syntax war falsch.

2.) geht das überhaupt, dass man eine Umrandung des TR Elementes macht anstatt in der TD? Denn sobald mehrere TDs in einer Zeile sind, klappr das Script ja nicht.

Wer kann mir da helfen diese eine zeile zu schreiben? Der Code ist hier...

var lastSelectedRow = null;

function markedRow(element){

if(lastSelectedRow != null){    // WENN VARIABLE NULL...
 lastSelectedRow.className='waTableRowEven'; // variable mit Tabellen Styles gefuellt...
}

lastSelectedRow = element;    // aktuelles Element in lastSelectedRow
element.className='waTableRowEvenSelected';   // Klassennamen aendern in waTableRowEvenSelected

return false;
}

Thanx im Voraus für Eure Hilfe
Joel

[Ashura]

puts "Hallo " + gets.chomp + "."

?> thunderstorm
=> Hallo thunderstorm.

Wenn ich dich richtig verstanden habe, möchtest du beim Hovern der gesamten Zeile die Hintergrundfarbe der diesigen ändern, oder?

Warum übergibst du dann nicht per <tr onmouseover=""> und this das aktuelle Objekt, womit du in der Funktion die aktuelle Hintergrundfarbe abfragen und entsprechend ändern kannst?

Einen schönen Montag noch.

Gruß, Ashura

[thunderstorm]

Wenn ich dich richtig verstanden habe, möchtest du beim Hovern der gesamten Zeile die Hintergrundfarbe der diesigen ändern, oder?

Hi Nein, die angewählte Zeile wird per Mausklick gekennzeichnet (mit Rahmen.
Das Problem ist ja, dass nur jede zweite Zeile dieselben Farben hat abwechslungsweise die gerade oder ungeraden Zeilen.
Beim markieren solte sich ausser dem Rahmen um die Zeile nichts weiter ändern.
Da muss ich doch irgendwie herausfinden welche Zeile diese angeklickt e ist. Entweder eine gerade oder eine ungerade. jenachdem
wird dann die Hintergundfarbe wieder gleich gesetzt und zusätzlich einen Border.
Die Klassen sind in diesem Fall...

.waSwitchColor .waTableRowOdd {
   background-color: #DBE4ED;
   color: #000000;
}
.waSwitchColor .waTableRowEven {
   background-color: #BFCCD9;
   color: #000000;
}

...wobei waSwitchColor nur eine Art Farbumschalter ist.
Darunter kommen nun eben noch die Klassen...

.waSwitchColor .waTableRowOddSelected {
   background-color: #DBE4ED;
   color: #000000;
   border: 1px solid #000000;
}
.waSwitchColor .waTableRowEvenSelected {
   background-color: #BFCCD9;
   color: #000000;
   border: 1px solid #000000;
}

...dazu die beim anklicken die obenstehenden ersetzen.
Hoffe es ist nun ein wenig verständlicher.
Gruss thunderstorm

[wahsaga]

hi,

Das Problem ist ja, dass nur jede zweite Zeile dieselben Farben hat abwechslungsweise die gerade oder ungeraden Zeilen.
Beim markieren solte sich ausser dem Rahmen um die Zeile nichts weiter ändern.

dann wäre es vermutlich einfacher, gar nicht die klasse zu ermitteln und auszutauschen, sondern lediglich den rahmen dynamisch über das style-objekt zu setzen bzw. wieder zu entfernen.

gruß,
wahsaga

[thunderstorm]

...lediglich den rahmen dynamisch über das style-objekt zu setzen bzw. wieder zu entfernen.

OK, das könnt ich doch gerade mal machen (versuchen).  ;-)
Thanx, Grazzie und...

Cheers
thunderstorm

[Ashura]

puts "Hallo " + gets.chomp + "."

?> thunderstorm
=> Hallo thunderstorm.

Hi Nein, die angewählte Zeile wird per Mausklick gekennzeichnet (mit Rahmen.

Dann eben nicht onmouseover sondern onclick. Auch kein Problem.

Das Problem ist ja, dass nur jede zweite Zeile dieselben Farben hat abwechslungsweise die gerade oder ungeraden Zeilen.

In der Fassung, in der ich mir die Funktion vorgstellt habe, ist dies völlig irrelevant.

Beim markieren solte sich ausser dem Rahmen um die Zeile nichts weiter ändern.

Dazu nutzt du meinetwegen das style-Objekt mit der border-Eigenschaft.

Da muss ich doch irgendwie herausfinden welche Zeile diese angeklickt e ist. Entweder eine gerade oder eine ungerade.

Nein wozu? Es genügt doch vollkommen, wenn deine Funktion die Hintergrundfarbe und den Rahmen der anderen Zeilen (mit einer Schleife) auf die Standardwerte zurücksetzt.

Abstrakt:

<tr onclick="foo(this);">
|
|-> function foo(bar);
  |
  |-> Schleife (alle tr zurücksetzen);
      bar-Hintergrundfarbe abfragen und neu setzen;
      bar-Rahmen setzen;

Hoffe es ist nun ein wenig verständlicher.

Ich auch.

Einen schönen Montag noch.

Gruß, Ashura

[Cybaer]

Hi,

Jetzt habe ich (weil kein Javascript Spezialist) 2 Probleme/Fragen:

Hm, klingt etwas wirr.

Aber ich habe die richtige Methode nicht gefunden und/oder die Syntax war falsch.

className ist richtig.

2.) geht das überhaupt, dass man eine Umrandung des TR Elementes macht anstatt in der TD? Denn sobald mehrere TDs in einer Zeile sind, klappr das Script ja nicht.

?

Du kannst in CSS alle TDs eines TRs ansprechen: TR TD { border:...;}

Gruß, Cybaer