Hintergrundfarbe <tr> wechseln / beibehalten

[Fabienne]

Guten Abend zusammen,

habe folgendes Problem:
Habe eine Zeile, in der viele Checkboxen stehen.
Diese Zeile will ich durch Mouseklick highlighten, um nicht aus Versehen in der Zeile zu verutschen. Ebenfalls kann man die Zeile wieder "de-highlighten" durch anklicken.

Wenn man jetzt aber eine Checkbox anklickt, verliert die Zeile ebenfalls ihre Farbe.
Ideen?

<script language = "javascript" type = "text/javascript">
<!--
var color_over="#89919A";
var color_out="#F1F2F3";
var color_active="#89919A";
var color_inactive="#F1F2F3";

function change (tr) {
    tr.style.backgroundColor= color_over;
}

function unchange (tr) {
    if (tr.title == "active")
    {
    tr.style.backgroundColor = color_active;
    }
    else
    {
    tr.style.backgroundColor = color_out;
    }
}

function mark (tr) {
    if(tr.title == "inactive" || tr.title == "")
    {
    tr.style.backgroundColor = color_active;
    tr.title="active";
    }
    else if(tr.title == "active")
    {
    tr.style.backgroundColor = color_inactive;
    tr.title="inactive";
    }
    else
    {
    // Nix tun
    }
}

//-->
</script>

<tr onmouseover = "change(this)" onmouseout = "unchange(this)" onclick = "mark(this)">

Viele Grüße
Fabienne

[Gernot Back]

Hallo Fabienne,

Habe eine Zeile, in der viele Checkboxen stehen.
Diese Zeile will ich durch Mouseklick highlighten, um nicht aus Versehen in der Zeile zu verutschen. Ebenfalls kann man die Zeile wieder "de-highlighten" durch anklicken.

Wenn man jetzt aber eine Checkbox anklickt, verliert die Zeile ebenfalls ihre Farbe.

Dein Stichwort heißt Eventbubbling:

http://forum.de.selfhtml.org/archiv/2006/9/t136244/#m884766

Gruß Gernot

[Fabienne]

Hi Gernot,

vielen Dank für Deine Antwort!
Bin leider nicht ganz durchgestiegen:

Muss ich die event.cancelBubble = true; in das "Mutterelement" reinpacken, in die Onklick-Routine, oder in das "Kindeselement"?

Vielen Dank
Fabienne

[Fabienne]

Hallo zusammen,

ich habs:

onclick = "mark(this);event.cancelBubble = true;if (event.stopPropagation)event.stopPropagation();"

muss zusätzlich in das "Kindeselement" rein.

Also sinngemäß:

<tr onclick="highlight_tr()"><td><input type="checkbox" onclick = "mark(this);event.cancelBubble = true;if (event.stopPropagation)event.stopPropagation();"></td></tr>

Damit wird das "Hightlighning" der <tr> nicht mehr durch anklicken der Checkbox ausgelöst!

Viele Grüße
Fabienne