✔ Alle Zellen Einfärben

Thomas_Jung

Thomas_Jung

Erfahrenes Mitglied
Hallo

Ich benötige etwas Hilfe.
Warum färbt er mir die Zeile nicht ein?

Code: 
<script type="text/javascript">
<!--
function checkAll(obj, id) {
	var ml = document.dataform;
	var len = ml.elements.length;
	for (var i = 0; i < len; i++) {
	var box = ml.elements[i];
		if (box.name == "checkboxes[]") {
		if (box.checked == false) box.checked = true;
//  Was mache ich hier falsch  
		if (box.checked == true) document.getElementById("tr_".id).style.backgroundColor='red';
		if (box.checked == false) document.getElementById("tr_".id).style.backgroundColor='blue';
// 

		}
	}

}
//-->
</script>

<form name="dataform">
<table border=1 width="50%">
<tr id="tr_1">
<td><input type="checkbox" name="checkboxes[]" id="checkboxes[]" value="1">1</td>
</tr>
<tr id="tr_2">
<td><input type="checkbox" name="checkboxes[]" id="checkboxes[]" value="2">2</td>
</tr>
</tr>
</table>

<input type=button value="Alle" onClick="checkAll()">

Gruß Thomas
 
Mach 's weg, mach 's weg, mach 's weg! Da bekomm ich schon beim Hinsehen Schmerzen:
Code: 
id="checkboxes[]"
IDs, wie der Name schon sagt, sind eindeutig und dürfen nicht mehrmals vorkommen. Sie sind eindeutige Bezeichnungen und keine Arrays.
 
Moin Thomas,

Was mache ich hier falsch
Zum Vergrößern anklicken....
...jenes:

Code: 
..........ntById("tr_".id).sty.......

Zum einen bist du ein wenig mit PHP durcheinander gekommen:)(passiert mir auch oft)...der Stringverkettungsoperator in JS ist +

Zum anderen hast du überhaupt keine Variable id(du hast da nur ein Funktionsargument id, jenes ist aber undefined, weil du der Funktion keine Parameter übergibst).

Generell:
Du kannst eigentlich auf diese ganzen IDs verzichten, denn die <tr> jedes der <input>' kannst du bequem per
Code: 
 [checkboxobjekt].parentNode.parentNode
ansprechen.:)
 
Hi Sven Mintel

Danke für dier Info:)

Z.B.

HTML: 
if (box.checked == false) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#f00' : '#090';

Gruß Thomas
 
OnMouseOver Zelle nur einfärben wenn nicht checked

Hi

Wenn ich mit der Maus über die Zeile fahre soll sich die Hintergrungfarbe nur
ändern wenn die Checkbox nicht angehakt ist.

Mein Versuch:D

Code: 
<tr onmouseover="if (document.getElementByName('checkbox[]').!checked) { this.style.backgroundColor='lightyellow'; };">
<td style="width:3%;border-bottom: solid 1px #666666;" valign="top" align="center">
<input style="cursor:pointer; cursor:hand; border:0 solid #00ffff;background-color:transparent;" type="checkbox" name="checkboxes[]" value="<?php echo $result_id;?>" onclick="parentNode.parentNode.style.backgroundColor = (checked) ? 'lightyellow' : '#f6f6f6';"; onfocus="this.blur();">
</td>

Weiß jemand Rat?

Gruß Thomas
 
Ich hab da mal was ausklamüsert..
Im Prinzip musst du nur der Checkbox 'ne ID mitgeben, genauso wie den TR's.
In meinem Beispiel habe ich den TR's die id "$result_id" mitgegeben, den Checkboxen
die id "cb_$result_id";

Dann einfach keinen background für Elemente innerhalb der TR definieren und schwups...
Mal beispielhaft:
Script:
Javascript: 
        <script type="text/javascript">
            function colors(tr,inout){
                var elem = document.getElementById('cb_'+tr.id);
                var col = '#f6f6f6';
                if(elem.checked && inout == false){
                    col = 'lightyellow';
                }
                tr.style.backgroundColor = col;                
            }
        </script>

TR
PHP: 
            <tr style="background: #f6f6f6;" id="<?php echo $result_id; ?>" onMouseOver="colors(this,true);" onMouseOut="colors(this,false);">
                <td>
                <input style="cursor:pointer; cursor:hand; border:0 solid #00ffff;" 
                       type="checkbox" 
                       name="checkboxes[]"
                       id="cb_<?php echo $result_id;?>" 
                       value="<?php echo $result_id;?>"  
                       onfocus="this.blur();"
                       onclick="parentNode.parentNode.style.backgroundColor = (checked) ? 'lightyellow' : '#f6f6f6';"/>                 
                </td> 
            </tr>
 
Zuletzt bearbeitet von einem Moderator:
Es gäbe da nnoch eine Variante:

Wenn beim Anklicken der Checkbox die Hintergrundfrabe gesetzt wird, hat die <tr> ja eine Hintergrundfarbe...und diese kann man abfragen.

Man muss also nur ermitteln, ob sie keinen der beiden Werte hat, und kann kann sie dann einfärben.

Das funktioniert allerdings nur richtig gut, wenn du als Hintergrundfarbe einen Farbnamen lt. Netscape-Farbpalette angibst, andernfalls variiert es je nach Browser, was dort zurückgegeben wird(entweder Hex-Wert oder Format rgb(r,g,b) )
 
Stimmt auch wieder. Aber eigentlich müsste TR doch auch einen Start-Hintergrundfarbwert haben, oder?
Denn im onclick-Event der Checkbox wird beim Abwählen #f6f6f6 gesetzt. Naja, verstehen muss ich es nicht :)

Ich habe übrigens einen kleinen Fehler in's Script eingebaut, da hab ich wohl nicht gründlich genug gelesen.

Script muss so aussehen
Javascript: 
        <script type="text/javascript">
            function colors(tr,inout){
                var elem = document.getElementById('cb_'+tr.id);
                if(!elem.checked){
                    var col;
                    col = tr.style.backgroundColor;
                    if(inout == true){
                        col = 'lightyellow';
                    } else {
                        col = '#f6f6f6';
                    }
                } 
                tr.style.backgroundColor = col;                
            }
        </script>
 
Zuletzt bearbeitet von einem Moderator:
Hallo

Momentan wird nur die obere Zeile Name Vorname Strasse eingefärbt.
Könnte mir jemand dabei helfen den Code so zu Vervollständigen das auch die untere Zeile sich mit einfärbt.
Falls das möglich ist.

Gruß Thomas

DEMO http://akteneinlagerung.de/demo/test.php

Code: 
<html>

<head>
  <title></title>
<script type="text/javascript">
function checkAll(obj, id)
{
   var ml = document.dataform;
   var len = ml.elements.length;
   for (var i = 0; i < len; i ++ )
   {
      var box = ml.elements[i];
      if (box.name == "checkboxes[]")
      {
         if (box.checked == false) box.checked = true;
         if (box.checked == false) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#FFFEFE' : '#FFCC99';
         if (box.checked == true) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#FFCC99' : '#FFFEFE';
      }
   }

}
function uncheckAll()
{
   var ml = document.dataform;
   var len = ml.elements.length;
   for (var i = 0; i < len; i ++ )
   {
      var box = ml.elements[i];
      if (box.name == "checkboxes[]")
      {
         if (box.checked == true) box.checked = false;
         if (box.checked == false) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#FFCC99' : '#FFFEFE';
         if (box.checked == true) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#FFFEFE' : '#FFCC99';
      }
   }
}
function switchAll()
{
   var ml = document.dataform;
   var len = ml.elements.length;
   for (var i = 0; i < len; i ++ )
   {
      var box = ml.elements[i];
      if (box.name == "checkboxes[]")
      {
         box.checked = ! box.checked;
         if (box.checked == false) box.parentNode.parentNode.style.backgroundColor = '#FFFEFE';
         if (box.checked == true) box.parentNode.parentNode.style.backgroundColor = '#FFCC99';
      }
   }
}
function colors(tr, inout)
{
   var elem = document.getElementById('cb_' + tr.id);
   if( ! elem.checked)
   {
      var col;
      col = tr.style.backgroundColor;
      if(inout == true)
      {
         col = '#CCFFCC';
      }
      else
      {
         col = '#FFFEFE';
      }
   }
   tr.style.backgroundColor = col;

}
</script>
</head>

<body>

<form name="dataform" id="dataform" method="post" action="index.php">
<table border="1">
<?php
 for($i = 0; $i < 10; $i++){
?>
<tr style="background-color: #FFFEFE;" id="<?php echo $i; ?>" onMouseOver="colors(this,true);" onMouseOut="colors(this,false);">
<td align="center" valign="top" width="20px"><input class="checkbox" type="checkbox" name="checkboxes[]" id="cb_<?php echo $i;?>" value="<?php echo $i;?>" onfocus="this.blur();" onclick="parentNode.parentNode.style.backgroundColor = (checked) ? '#FFCC99' : '#FFFEFE';"></td>
<td align="center" valign="top" width="150px"><span class="text">Name</span></td>
<td align="center" valign="top" width="150px"><span class="text">Vorname</span></td>
<td align="center" valign="top" width="150px"><span class="text">Strasse</span></td>
<tr>
<tr>
<td colspan="4">Bemerkung</td>
</tr>
<?php
}
?>
</table>
</form>

<input type="button" value="Alle" onClick="checkAll();">
<input type="button" value="Keine" onClick="uncheckAll();">
<input type="button" value="Spiegeln" onClick="switchAll();">

</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück