helmuthelmut2000
Goto Top

Bei onclick soll sich die Zeilenfarbe geändert bleiben.

Hallo

Ich habe folgendes Problem.

Wenn ich mit der Maus eine Zeile auswähle dann sollte sich die
Hintergrundfarbe von der Zeile ändern.
Das tut die auch, aber wenn ich dann wieder weg fahre dann kommt die alte Farbe wieder.
Ich habe das mit einem JavaScript gemacht.

<script type="text/javascript">
<!--
function setStyle(obj,e)
{
if(e)
{
if(obj.id=='clicked')
{
obj.id='unclicked';
resetStyle(obj,true);
return;
}
obj.id='clicked';
}
obj.style.backgroundColor = '#1A3A4D';
obj.style.color = '#102B3B';
}

function resetStyle(obj,e)
{
if(obj.id=='clicked')
{
return;
}
obj.style.backgroundColor = '#102B3B';
obj.style.color = '#102B3B';
}
//-->
</script>


onMouseover=this.style.backgroundColor=\'#CECBCE\' onMouseout=this.style.backgroundColor="" onclick="setStyle(this,true)"


Wo könnte der Fehler sein?
Es sollte immer nur eine Zeile markiert sein.

Danke.

Content-Key: 202756

Url: https://administrator.de/contentid/202756

Printed on: April 25, 2024 at 18:04 o'clock

Member: EvilMoe
EvilMoe Mar 04, 2013 at 16:17:49 (UTC)
Goto Top
Hallo,

was heißt wenn du eine Zeile ausgewählt hast für dich?
Bei einen Mausklick oder wenn man darüber fährt?


Gruß
Member: helmuthelmut2000
helmuthelmut2000 Mar 04, 2013 at 19:56:03 (UTC)
Goto Top
Hallo,

Ja bei einem Mausklick.

Gruß
Helmut
Member: Arano
Arano Mar 05, 2013 at 01:27:23 (UTC)
Goto Top
Hallo Helmut,

1.
Du verwendest das onclick und onmouseout zusammen !
Nach deinem Klick auf das Element bewegst du die Maus und __verlässt__ das Element wodurch der onmouseout aktiviert und die Hintergrundfarbe wieder geändert wird !

Das bedeute schon mal, das dein onmouseout zwischen normale Elementen und dem einem aktiven/angeklicktem Elemente unterscheiden muss !


2.
Da du dir so ganz nebenbei noch gewünscht hast, das nur ein Elemente aktive/angeklickt ist, musst du dir mit dem onclick merken welches Elemente gerade aktiviert wurde. Z.B. mit einer Variable in der die ID des aktiven Elementes hinterlegt wird. Dieses Variabel kannst du dann auch in deinem onmouseout verwenden um das normale Elemente von einem aktiven zu unterscheiden.
Bei einem Klick muss dann geprüft werden ob das Elemente dem aus der Variabel entspricht...
Wenn dem so ist, muss nichts geschehen (ist ja schon aktiv)
Wenn nicht, muss das Element aus der Variable wieder "normalisiert" werden und das angeklickte "markiert" und gemerkt werden.


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 05, 2013 at 06:55:02 (UTC)
Goto Top
Hallo Arano,

Ja, das hab ich schon versucht. Das ich das onmousout weglasse. Aber dann wechselt
ja die Farbe beim überfahren nicht mehr zurück.

Wie mach ich das denn mit der ID?
Kannst du mir das etwas näher Erklären?

Danke.
Member: Arano
Arano Mar 05, 2013 at 10:36:55 (UTC)
Goto Top
Guten Morgen

Ja klar !
Also jedes deiner Elemente das mit diesem Effekt versehen werden soll, bekommt eine ID. Ich veranschauliche das mal an einer kleinen Tabelle:
<table>
  <tr id="z1" onclick="...">    <td>Zeile 1, Spalte 1</td>    <td>Zeile 1, Spalte 2</td>    <tr>  
  <tr id="z2" onclick="...">    <td>Zeile 2, Spalte 1</td>    <td>Zeile 2, Spalte 2</td>    <tr>  
  <tr id="z3" onclick="...">    <td>Zeile 3, Spalte 1</td>    <td>Zeile 3, Spalte 2</td>    <tr>  
</table>
Somit ist jede __Zeile__ eindeutig identifizierbar

In der Javascript-Funktion liest du dann dieses ID aus und vergleichst den Wert mit deiner "Merk-Variable" curMerked. Wenn die Werte gleich sind, bedeutete das, dass die Zeile schon als "angeklickt" markiert ist und wir verlassen die Funktion ohne etwas zu machen.
Wenn die Werte aber unterschiedlich sind. muss du die Hintergrundfarbe von dem Element mit der ID aus der Mark-Variable wieder zurücksetzen, die Hintergrundfarbe des (neu) angeklickten Element ändern und die neue ID in die Mark-Variable schreiben.
/**
 * globale Variabel, sie steht in allen NACHVOLGENDEN Funktionen zur Verfügung.
 * In ihr speichern / merken wir und die ID des aktuell markierten Elements.
 */
var curMarked=null;


/**
 * mark_as_single_clicked( elm )
 *
 * Markiert ein ein einziges Element als "markiert" in dem es die Hintergrundfarbe ändert. 
 * Um nur jeweils ein Element als markiert zu halten, wird die ID des Elements gespeichert.
 * Anhand der gespeicherten ID wird bei einem Aufruf das alte Element resettet und das neue
 * modifiziert.
 */
function mark_as_single_clicked( element )
{
  if( element.id==curMarked )
  {
    // angeklickte Elemente sind gleich
    // es gibt nichts zu tun
    return null;
  }
  
  // Elemente sind unterschiedlich
  
  // resete altes Element
  if( curMarked!=null )
  {
    // beim ersten Aufruf der Funktion, kann es ja kein markiertes Element geben,
    // also enthält die Mark-Variable keine gültige ID !!!
    // darum nur resetten, wenn die Merk-Variable NICHT GLEICH NULL ist !!!
    lastMarked = document.getElementById( curMarked );
    lastMarked.style.backgroundColor = "#ffffff";  
    lastMarked.style.color = "#000000";  
  }
  
  // modifiziere neues Element
  element.style.backgroundColor = "#cccccc";  
  element.style.color = "#99000";  
  
  // merke Element
  curMarked = element.id;
  
  
  return true;
}



/**
 * toggle_highlight( elm )
 *
 * Anhand der globalen Mark-Variable entscheiden wir welche Hintergrundfarbe
 * das Element beim verlassen mit dem Mauszeiger bekommt (onmouseout)
 */
function toggle_highlight( element )
{
  // Jetzt bist du dran !
  // verwende die Merk-Variable um zwischen einem "normalen" und einem 
  // "markiertem" Element zu unterscheiden. 
  
  return true
}
Bei Funktionen erwarten als Parameter das aktuelle Element.
Sie müssen als in folgender Form implementiert werden:
<table>
  <tr id="z1" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">  
    <td>Zeile 1, Spalte 1</td>    <td>Zeile 1, Spalte 2</td>
  <tr>
  <tr id="z2" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">  
    <td>Zeile 2, Spalte 1</td>    <td>Zeile 2, Spalte 2</td>
  <tr>
  <tr id="z3" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">  
    <td>Zeile 3, Spalte 1</td>    <td>Zeile 3, Spalte 2</td>
  <tr>
</table>

Sämtlicher Code ist __nicht getestet__
Sämtlicher Code ist __nicht getestet__


Viel Erfolg
~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 05, 2013 at 12:23:08 (UTC)
Goto Top
Hallo Arano,

Den obigen Code kann ich doch in eine Datei kopieren mit dem Namen zeilenfarbe.js
im Ordner javascript speichern.
Dann am Anfang von meiner Seite lade ich den script doch mit dem Befehl:

<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script>

Dann schaut das jetzt in meiner Tabelle noch so aus:

echo '<tr id=z1 bgcolor='.$farbe[$j%2].' onMouseover=this.style.backgroundColor=\'#CECBCE\' onMouseout=this.style.backgroundColor="" onclick="GoTo(\'details.php?auswahl=' . $dsatz["schluessel"] . '\')" style="cursor: pointer">';

Wie muss ich das jetzt ändern damit bei einem klick es nicht gleich auf die Detail Seite geht sondern nur
die Geklickte Zeile Farbig unterlegt wird und bei einem Doppelklick oder wenn nach einem Klick und dann die Enter
Taste soll auf die Detail Seite gegangen werden. Schön wäre es wenn man bei einem Klick die Zeile Farbig Hinterlegt
wird, und mann könnte dann noch mit der Pfeiltaste noch oben oder unten springen und dann auswählen.

Kannst du mir da noch mal helfen?
Member: Arano
Arano Mar 06, 2013 at 00:00:48 (UTC)
Goto Top
Hi,

na jetzt möchtest du aber ein bisschen viel face-wink
Ähm,ich glaube zwar, dass das mit der Enter- und den Pfeiltaten prinzipiell möglich ist aber das überschreitet A) meine Wissen und B) schätze ich mal dass das auch einiges an Aufwand bedeutet und hier im Forum eher schlecht zu bewältigen ist, vor allem bei eingeschränkter Erfahrung.
Darum lasse ich das einfach weg !

Machen wir also folgendes:
bei Doppelklick, öffnen der Details und
bei einfachen Klick, Zeile markieren.

Als erstes machst du aus dem onclick ein ondblclick um bei einem Doppelklick die Details aufzurufen.
Und nun fügst du ein neues onclick ein. Wenn du meinen Funktionsnamen übernimmst, etwa wie folgt: onclick="mark_as_single_clicked(this)"


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 06, 2013 at 07:36:19 (UTC)
Goto Top
Hi,

Das hab ich so versucht, aber das geht nicht. Das mit dem Doppelclick das geht.

Reicht das denn aus wenn ich den code von dir in eine Datei speichere und am Anfang die Zeile:

<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script> einfüge.

Muß der onclick Befehl dann nicht irgendwie anders heisen? onclick="document......

Gruß
Helmut
Member: Arano
Arano Mar 07, 2013 at 00:12:20 (UTC)
Goto Top
Hi hi !

Das hab ich so versucht, aber das geht nicht.
Das ist keine verständliche Fehlermeldung / Aussage - damit kann ich nichts anfangen !

Reicht das denn aus wenn ich den code von dir in eine Datei speichere und am Anfang die Zeile:
<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script> einfüge.
Sofern der Pfad richtig ist, eigentlich ja !
ABER Schau noch mal was ich unter dem Javascript gepostet habe. face-wink

Schiebe einfach noch mal ein alert("DEBUG-Nachricht"); in die erste Zeile der Funktion die vermutlich nicht funktioniert. So kann man sich Gewissheit verschaffen ob die Funktion überhaupt aufgerufen wird und wenn ja, wie weit sie "abgearbeitet" wird... wenn man mehrere alersts einbaut

Muß der onclick Befehl dann nicht irgendwie anders heisen? onclick="document...
Nicht dein Ernst oder !?
1. Meinst du dann hätte ich das nicht "irgendwie anders" vorgeschlagen ?
2. Definiere "irgendwie" !
3. Steht in deinem onclick="GoTo() irgend ein "document" und
4. da du es scheinbar nicht weisst: Was ist den "document" ?


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 07, 2013 at 10:39:04 (UTC)
Goto Top
Hallo Arano,

Ich kenn mich da jetzt gar nicht mehr aus.

Klar brauch ich das onclick="document... da nicht.

Wenn ich ein alert("Nachricht") einfüge dann bleibt es da stehen.
Das heist das das script auch geladen und verarbeitet wird.

Was ich aber noch nicht verstehe ist das mit der id. Und könnte da nicht der Fehler sein
das das noch nicht so funktioniert?

Gruß
Helmut
Member: Arano
Arano Mar 08, 2013 at 00:25:40 (UTC)
Goto Top
Hallo Helmut

ich kann dir leider nicht folgen !?
Ich habe mir das jetzt gerade mal selber in eine Datei zusammen kopiert. Also ein simples HTML-Grundgerüst, mein JS in den Header und eine Tabelle wie die die ich zum zeigen verwendet habe in den Body.
Funktioniert !
Einzig den SChriftfarbenwechsel sieht man nicht, aber das hat andere Gründe - aber das Script funktioniert !

Du musst also schon mal etwas genauer fragen oder sagen was los ist...


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 08, 2013 at 08:53:07 (UTC)
Goto Top
Hallo Arano,

Wenn ich meine Zeile so aufrufe, dann geht das auch.

echo '<tr id="z1" bgcolor='.$farbe[$j%2].' onclick="mark_as_single_clicked(this)" ondblclick="GoTo(\'details.php?auswahl=' . $dsatz["schluessel"] . '\')" style="cursor: pointer">';

Da ändert sich aber die Zeilenfarbe nicht beim überfahren der Zeilen.

Wenn ich das also mit dem aufruf mache dann gehts nicht weil ja die onMousout das wieder aus macht.

echo '<tr id="z1" bgcolor='.$farbe[$j%2].' onMouseover=this.style.backgroundColor=\'#CECBCE\' onMouseout=this.style.backgroundColor="" onclick="mark_as_single_clicked(this)" ondblclick="GoTo(\'details.php?auswahl=' . $dsatz["schluessel"] . '\')" style="cursor: pointer">';

Kann man das dann auch irgend wie in das Javascript mir einbauen das sich die Zeilenfarbe dann ändert beim überfahren.

Danke.
Member: Arano
Arano Mar 08, 2013 updated at 10:26:35 (UTC)
Goto Top
Guten Tag,

Wenn ich das also mit dem aufruf mache dann gehts nicht weil ja die onMousout das wieder aus macht.
Ja genau, so ist es !
Dafür habe ich ja bereits die zweite JS-Funktion vorgesehen: toggle_highlight()

Was haben wir denn ?
Dein ursprünglicher Hover-Effekt hatte lediglich zwei Zustände:
  • Normale Hintergrundfarbe und
  • Hervorgehobene Hintergrundfarbe

Durch die Modifikation mit der onclick-Funktion kommen noch zwei Zustände dazu:
  • normale Hintergrundfarbe,
  • hervorgehobene Hintergrundfarbe,
  • markierte Hintergrundfarbe und
  • markierte hervorgehobene Hintergrundfarbe.

Du musst also als erstes einmal herausfinden, ob das Element ein "markiertes" oder ein "normales" Element ist. Das kannst du anhand der IDs machen ! Jedes Element hat seine eignen ID und zusätzlich hast du die ID des markierten Elements in der Variable curMarked stehen. So kannst du also entscheiden ob das Element das aktuell Markierte ist, oder nicht.
Je nach dem was es dann ist, liest du die Hintergrundfarbe aus und entscheidest erneut was passieren soll.


Mach wir das mal so:
Aufgabe 1
Schreibe eine Javascipt-Funktion toggle_highlight(this) die dir mittels alert(...) mitteilt ob das Element (this) ein "normales" oder ein "markiertes" ist.
Verwende dazu als Referenz die Variable "curMarked".
Zum testen bindest du die JS-Funktion __nur__ als "onmouseover" in deinen Tabellenzeilen ein.


Viel Erfolg
~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 08, 2013 at 11:11:01 (UTC)
Goto Top
Aber Arano,

Ich weis jetzt überhaupt nicht was ich da machen soll.
Member: Arano
Arano Mar 08, 2013 at 23:19:23 (UTC)
Goto Top
Hi...

hm... jetzt weiß ich nicht mehr wie ich dir Helfen kann !?

Alle was du innerhalb der vorgeschlagenen Funktion logisch zusammensetzen musst ist:
  • if(){} else{}
  • alert("markiert")
  • alert("normal")
  • element.id
  • curMarked

http://wiki.selfhtml.org/wiki/Referenz:JavaScript


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 09, 2013 at 00:22:08 (UTC)
Goto Top
Hallo Arano,

Ich bin da etwas weitergekommen aber so, und noch nicht
ganz wo ich hin will.
Aber vielleicht kannst du mir da weiterhelfen.
Mit dem javascript kann ich eine Zelle Markieren. Also wenn ich
onclick="mark(this)" im <td> stehen hab.
wie geht das damit man die ganze Zeile Markiert. Also ich muss das
doch im <tr> stehen haben.


function mark(el)
{
var elTr = el.parentNode, elCell = null;
for( var i = 0; i < elTr.cells.length; i++ )
{
elCell = elTr.cells[i];
elCell._current = false;
elCell.style.background = '';
}

el.style.background = 'green';
el._current = true;
}

function wechseln(el, col)
{
el.style.backgroundColor = col;
}


Gruß
Helmut
Member: helmuthelmut2000
helmuthelmut2000 Mar 11, 2013 at 22:19:19 (UTC)
Goto Top
Hallo Arano,

Jetzt hab ich das ganze Wochenende gegooglt und bin zu nichts nützliches
gekommen.
Es ist kein Problem eine Zeile zu Markieren und wieder zurück Markieren
wenn keine wechsel Farbe und kein Mouseover und Mouseout dabei ist.

Das kanns doch nicht sein
Oder?
Member: Arano
Arano Mar 12, 2013 at 14:43:17 (UTC)
Goto Top
Hallo Helmut.

Jetzt hab ich das ganze Wochenende gegooglt und bin zu nichts nützliches gekommen.
Warum ?
Ich habe die komplette Lösung doch bereits im Kopf !
Ich müsst sie nur noch niederschreiben... aber das will ich nicht - das ist deine Aufgabe !

Und bevor du mir mit noch mehr ergoogletem kommst:
  1. Was verstehst du an meiner ID Lösung nicht und
  2. Was ist mit der Aufgabe 1 !?


~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 12, 2013 at 14:57:35 (UTC)
Goto Top
Hallo Arano,

Es muß doch in dem script eine Funktion rein, wo man sich die Markierte Zeile merkt.
Und beim Mousover und Mousout muß doch diese Zeile ausgelassen werden.
Das geht doch nur mit einer id. Oder nicht?
Member: helmuthelmut2000
helmuthelmut2000 Mar 15, 2013 at 17:55:08 (UTC)
Goto Top
Hallo Arano,

Mich interessiert das jetzt wie das geht. Können wie das zusammen machen?
Also ich habe eine .php Seite und am Anfang habe ich die Zeile stehen:

<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script>

Wenn ich dann in meiner Tabelle bin, kommt am Anfang das sich jede 2. Zeile eine andere Farbe
hat. Das mach ich so:
$farbe="#FFFFFF"; Hintergrundfarbe 1
$farbe="#EEEEEE";
Hintergrundfarbe 2
$j=0;

echo '<tr bgcolor='.$farbe[$j%2].' onDbclick="GoTo(\'details.php?auswahl=' . $dsatz["schluessel"] . '\')" style="cursor: pointer">';
echo "<td class='td2' align='center'>" . $dsatz["song"] . "</td>";
echo "</tr>";

Jetzt brauchen wir noch das script im Verzeichnis javascrit mit dem Namen zeilenfarbe.js und da muss
jetzt rein, das sich beim überfahren der Zeilen die Farbe wechselt und bei einem Klick auf eine Zeile
muss diese Farbig hinterlegt bleiben.
Wie mach ich da jetzt weiter?

Gruß
Helmut
Member: Arano
Arano Mar 15, 2013 at 20:34:54 (UTC)
Goto Top
Ey ! Das ist doch jetzt nicht dein Ernst oder !?

Seit wann sind die Zeilen den Zweifarbig !?
Das jede zweite Zeile eine andere Farbe hat ist mir jetzt neu und das funktioniert mit meinem Script nicht !
Denn das bedeutet, dass wir uns nicht nur merken müssen welche Zeile markiert ist, sondern auch welche Farbe diese Zeile hatte. Das ist sowohl für die Markier-Funktion wichtig um das Element in den Ursprungszustand zurück zu setzen... als auch für den Hover-Effekt der beim Verlassen des Elements ebenfalls den Ursprungszustand wissen muss !

Auf der anderen Seite mag es erfreulich sein das du es verstehen möchtest.
ABER __meine__ Zeit ist kostbar !

Soll heißen: Solange ich VON DIR keine vernünftigen Antworten auf die Fragen aus Aufgabe 1 erhalte... rühre ich keinen Fingen ! Ich habe sowohl genügend eigene Arbeit als auch Bedürfnis nach Ruhe, als das ich Zeit hätte meine Zeit mit dem Wiederholen von Fragen zu verschwenden.


Erfolgreiches Wochenende
~Arano
Member: helmuthelmut2000
helmuthelmut2000 Mar 15, 2013 at 21:35:38 (UTC)
Goto Top
Hallo Arano,

Ich wusste nicht das es Wichtig ist, das ich Zweifarbige Zeilen habe.

Natürlich wußte ich auch nicht das ich mit meiner Sache deine kostbare Zeit stehle.
Deshalb bleibt meine Seite vor erst so wie sie ist und du brauchst auch keine Zeit
mehr mit mir Verschwenden.


Gruß
Helmut