✔ 2 Zellen einfärben

[Thomas_Jung]

Hallo
Beim klick auf die checkbox in der 1 Zelle färbt sich die Zelle rot
Jetzt soll ich einen weg finden das sich beim klick auf die checkbox in der 1 Zelle
die 2 Zelle ebenfalls rot färbt.

Null-Ahnung , aber vielleicht kann mir jemand weiterhelfen?

Gruß Thomas

  <script>
function getParent(el) {
     if (document.all)
         while (el.parentElement != null)
                if (el.tagName == 'TR') return el;
                else el = el.parentElement;
          else if (document.getElementById) {
         if (el.nodeType == 1 && el.tagName.toLowerCase() == 'tr')   return el;
         else return getParent(el.parentNode);
   }
}
function setParentTR(e, CSSattr, CSSvalue, CSSvalue_unchecked) {
     if (e) {
         var which = e.checked;
         var parentTR = getParent(e);
         parentTR.style[CSSattr] = (which) ? CSSvalue : CSSvalue_unchecked;
   }
}
</script>
<table border="1"><tr>
<td>
<input type="checkbox" name="formcheckbox1" onClick="setParentTR(this,'background','red', 'blue')" width="484">1 Zelle</td></tr>
<tr><td width="484"><p>2 Zelle</p></td>
</tr>
</table>

 

[Quaese]

Hi,

du könntest zum Beispiel solange den folgenden Knoten im Strukturbaum ermitteln (nextSibling)
und testen (nodeName), bis es sich wieder um eine Zeile (TR) handelt. Dieses Objekt färbst
du rot ein.

Dazu könnte deine Funktion setParentTR folgendermaßen verändert werden:

function setParentTR(e, CSSattr, CSSvalue, CSSvalue_unchecked) {
     if (e) {
         var which = e.checked;
         var parentTR = getParent(e);
         parentTR.style[CSSattr] = (which) ? CSSvalue : CSSvalue_unchecked;
         // Nachfolgenden Knoten ermitteln
         parentTR = parentTR.nextSibling;
         // Nächste Tabellenzeile ermitteln
         while(parentTR.nodeName != "TR")
         	parentTR = parentTR.nextSibling;
         // Zeile einfärben
         parentTR.style[CSSattr] = (which) ? CSSvalue : CSSvalue_unchecked;
   }
}

Ciao
Quaese

 

[Thomas_Jung]

Hallo Quaese

Vielen lieben Dank klappt 100%

Klappt das auch beim onmouseover bzw.onmouseout?

<script type="text/javascript">
function set_hover(the_row) {
if(the_row.style.backgroundColor != '#ccffcc') {
the_row.style.backgroundColor = '#E4E7F5';
}
}

function remove_hover(the_row) {
if(the_row.style.backgroundColor != '#ccffcc') {
the_row.style.backgroundColor = '';
}
}
</script>

<TR onmouseover="set_hover(this);" onmouseout="remove_hover(this)" bgcolor=<?php echo $hexfarbe; ?>>

 

[Quaese]

Hi,

ich habe deine bereits vorhandene Funktion setParentTR etwas modifiziert. Sie bekommt jetzt
einen zusätzlichen Parameter übergeben, mit dessen Hilfe bestimmt werden kann, ob es sich um
einen mouseover- oder mouseout-Event handelt
Zudem habe ich den Bereich zum Einfärben der Folgezeile etwas verändert, so dass keine Fehlermeldung
mehr auftritt, wenn es sich bei der auslösenden Zeile um die letzte in der Tabelle handelt.

Aufgerufen wird die Funktion nun im TR-Tag.

JS-Funktion:

function setParentTR1(e, CSSattr, CSSvalue, CSSvalue_unchecked, blnHover) {
  if (e) {
    var parentTR = e;
    parentTR.style[CSSattr] = (blnHover) ? CSSvalue : CSSvalue_unchecked;

    do{
      // Unmittelbar folgenden Knoten in Baumstruktur ermitteln
      parentTR = parentTR.nextSibling;
      // Falls keine weitere Zeile existiert
      if(parentTR == null)
        return;
    }while(parentTR.nodeName != "TR");

    parentTR.style[CSSattr] = (blnHover) ? CSSvalue : CSSvalue_unchecked;
  }
}

HTML:

<table border="1">
  <tr onmouseover="setParentTR1(this,'backgroundColor','red', 'blue', 1)" onmouseout="setParentTR1(this,'backgroundColor', 'red', 'blue', 0)">
    <td>1 Zelle</td>
  </tr>
  <tr onmouseover="setParentTR1(this,'backgroundColor','red', 'blue', 1)" onmouseout="setParentTR1(this,'backgroundColor', 'red', 'blue', 0)">
    <td width="484"><p>2 Zelle</p></td>
  </tr>
</table>

Ciao
Quaese

 

[Thomas_Jung]

Hallo Quaese

Auch das klappt super

Vieeelen Dank und ein schönes Wochenende.

Gruß Thomas