<tr>-Farbe bei checkbox-Aktivierung ändern - Problem bei Mehrfach-Selektion

[qsrs]

Hallo,

ich lasse Daten aus einer MySQL-DB über PHP ausgeben. Das Ganze zeige ich dann als Tabelle an. Jede Zeile bekommt eine Checkbox mit, mit dieser lassen sich dann Aktionen ausführen (wie z.B. löschen etc.).

Nun möchte ich, dass wenn man die Checkbox aktiviert, sich die Farbe der Zeile ändert. Das funktioniert auch. Des Weiteren soll sich die Farbe der Zeile ändern, wenn sich der Mauszeiger darüber befindet - funktioniert auch. Ebenfalls möchte ich, dass per Klick auf einen Link, alle Checkboxen aktiviert bzw. wieder deaktiviert werden. Das funktioniert ebenfalls.

Was jedoch nicht funktioniert ist, dass sich bei der Funktion, alle Checkboxen zu aktivieren, auch die Farbe aller Zeilen ändert. Ich bin was Javascript angeht leider nicht sehr versiert muss diese Funktion aber zur Verfügung stellen.

Hier die Funktion zum ändern der Zeilen-Farbe bei aktiveren der Checkbox:

 "<style type="text/css">
<!--
table.selectrows tr.checked { background-color:".$array4[table_hlcolor2].";}
-->
</style>";
<script type="text/javascript">
<!--
function rowclickedcheck(checkid, rowid)
{
window.setTimeout("colorizeRow('"+checkid+"','"+rowid+"')",300); //delay ist notwendig, weil der Eventhandler ausgelöst wird, bevor die Checkbox umgeschaltet wird...
return true;
}
function colorizeRow(idcheck, idrow)
{
document.getElementById(idrow).className = ((document.getElementById(idcheck).checked) ? "checked" : "unchecked");
}
//-->
</script>

Die Zeile sieht dann so aus (Anführungszeichen werden ausgequotet, da das Ganze in PHP ausgegeben wird - daran also nicht aufhalten):

<tr class=\"unchecked\" id=\"rownr".$array[$i][id]."\" bgcolor=\"".$array4[table_bgcolor4]."\" onmouseover=\"this.bgColor='".$array4[table_hlcolor2]."' onmouseout=\"this.bgColor='".$array4[table_bgcolor4]."'\">

Und hier noch die Funktion zum Selektieren mehrerer Checkboxen:

<script language="JavaScript" type="text/javascript">
function CheckAll() {
var ml = document.results;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];
if (e.name == "select[]") {
	if (e.checked == false) {
	 e.checked = true;
	 }
	else {
	 e.checked = false;
	 }	
}
}
}
</script>

Und per Link werden sie dann aktiviert: <a href="javascript:CheckAll()">Alle auswählen</a>

Kann ich diesem Link in irgendeiner Form die Information mitgeben, dass auch alle Zeilen die Farbe ändern sollen?

Ich würde mich über Hilfe wirklich freuen, da ich schon relativ viel versucht habe und meine JS-Fähigkeiten leider begrenzt sind.

 

[Sven Mintel]

Probiers mal statt:

if (e.name == "select[]") {
	if (e.checked == false) {
	 e.checked = true;
	 }
	else {
	 e.checked = false;
	 }	
}

...hiermit:

if (e.name == "select[]") 
  {
	  e.checked = (e.checked)?false:true;
	  e.parentNode.parentNode.style.backgroundColor= (e.checked)
	      ?'normalefarbe':'highlightfarbe';
  }

....mit e.parentNode.parentNode sprichst du den Elternknoten des Elternknotens von "e" an....
sofern die Checkbox ein direkter Kindknoten der <td> ist, wäre das das <tr>-Element,in welchem sich die Zelle befindet.
Ist die Sache tiefer verschachtelt, musst du halt noch ein paar "parentNode" dazupacken.

 

[qsrs]

Vielen Dank Sven, für deine Hilfe. Das hat mich schon einmal einen Schritt weiter gebracht.
Jetzt funktioniert das Ändern der Farbe auch bei Selektion aller Checkboxen.

Ein Problem besteht allerdings noch, und ich komme nicht dahinter. Wenn ich einzelne Checkboxen aktiviere, dafür verwende ich ja das erste JS weiter oben, funktioniert es nur solange, bis ich das zweite JS zum Auswählen aller Checkboxen durchführe. Sobald ich das mache, ändert sich die Farbe bei einer einzelnen Selektion nicht mehr. D.h. wenn die Checkbox aktiviert ist, und ich sie wieder deaktiviere, dann ändert sich die Farbe nicht und ebenfalls umgekehrt, wenn sie nicht aktiviert ist und ich sie aktiviere. Ich vermute das liegt daran, dass ich zwei unterschiedliche Funktionen, einmal zur Mehrfach-Selektion, und einmal zur Einzel-Selektion verwende.

Irgendwie scheint mir, dass die Funktion zur Einzel-Selektion noch die Information benötigt, dass eine Checkbox aktiviert ist, wenn die Funktion CheckAll() aufgerufen wird.

Ich hoffe, Du kannst mir noch einmal auf die Sprünge helfen. Das wäre sehr nett. Hier nun der geänderte Code für die Mehrfach-Selektion:

<script language="JavaScript" type="text/javascript">
function CheckAll() {
var ml = document.results;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];
if (e.name == "select[]") {
	if (e.checked == false) {
	 e.checked = true;
	 e.parentNode.parentNode.style.backgroundColor='".$array_js4[table_hlcolor2]."'
	 }
	else {
	 e.checked = false;
	 e.parentNode.parentNode.style.backgroundColor='".$array_js4[table_bgcolor4]."'
	 }	
}
}
}
</script>

Etwas anders als deine Variante, bei deiner ist der Fehler jedoch identisch.

 

[Sven Mintel]

Du änderst in CheckAll() die Hintergrundfarbe, in colorizeRow() den Klassennamen.

Die direkte Änderung der Hintergrundfarbe hat Vorrang vor den in der Klasse definierten Formaten..somit bleibt die Änderung des Klassennamens keine Auswirkung.

Lösung: entscheide dich für eine Methode, und benutze diese in beiden Funktionen.

 

[qsrs]

Ich scheitere leider an dem Versuch, die beiden Funktionen zu vereinen. Kann mir evtl. jemand behilflich sein? Meine JS-Kenntnisse reichen leider nicht aus, aber ich muss diese Funktionen zur Verfügung stellen.

Eigentlich kann ich weitere Hilfe kaum erwarten, ich würde mich dennoch darüber freuen und bedanke mich bereits im Voraus.