✔ Alle Zellen Einfärben

Sven Mintel · 18. Dezember 2009

Moin Thomas,

per nextSibling kommst du an den nächsten Nachbar eines Knotens(in deinem Fall an die darunterliegende <tr>)

Thomas_Jung · 18. Dezember 2009

Hallo
Der Code funktioniert nur wenn ich
<tr>
<tr>
<td colspan="4">Bemerkung</td>
</tr>
zwischen der 1 und 2 Zeile setze.

Mache ich es so
</tr>
<tr>
<td colspan="4">Bemerkung</td>
</tr>
funtioniert er nicht mehr.

Was mache ich falsch?

Ist das überhaupt Richtig?
parentNode.parentNode.nextSibling.nextSibling.

Gruß Thomas

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 == false) box.parentNode.parentNode.nextSibling.nextSibling.style.backgroundColor = (box.checked) ? '#FFFEFE' : '#FFCC99';

         if (box.checked == true) box.parentNode.parentNode.style.backgroundColor = (box.checked) ? '#FFCC99' : '#FFFEFE';
         if (box.checked == true) box.parentNode.parentNode.nextSibling.nextSibling.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';


         if (box.checked == false) box.parentNode.parentNode.nextSibling.nextSibling.style.backgroundColor = (box.checked) ? '#FFCC99' : '#FFFEFE';
         if (box.checked == true) box.parentNode.parentNode.nextSibling.nextSibling.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';

         if (box.checked == false) box.parentNode.parentNode.nextSibling.nextSibling.style.backgroundColor = '#FFFEFE';
         if (box.checked == true) box.parentNode.parentNode.nextSibling.nextSibling.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;
   tr.nextSibling.nextSibling.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';parentNode.parentNode.nextSibling.nextSibling.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>

Thomas_Jung · 18. Dezember 2009

Hallo

Könnte bitte noch jemand einen Blick darauf werfen?

Gruß Thomas

Thomas_Jung · 18. Dezember 2009

Hi

Habe das Problem in dem Artikel gefunden.

HTML:

In FF all elements have a text node, so instead of obj.nextSibling in IE you need obj.nextSibling.nextSibling in FF.
You have to test for the text node:var sibling;
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling; // Moz. Opera
}
else {
sibling=obj.nextSibling; // IE
}

Sometimes it is better to use a different method:
arrow = obj.getElementsByTagName('img')[0];

Habe es jetzt so gelöst, dass ich eine Browserweiche verwende.

HTML:

<!--[if IE]>
<![endif]-->

Gruß Thomas

Quaese · 19. Dezember 2009

Hi,

du hast beim Aufbau der Tabelle einen Fehler:

Code:

<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';parentNode.parentNode.nextSibling.nextSibling.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>

Der Schrägstrich beim schliessenden Zeilentag hat gefehlt.

Da es sich ohne diesen um ein öffnendes Tag handelt, wird es im FF geschlossen und es entsteht somit eine weitere Zeile.

Um zu gewährleisten, dass du tatsächlich die nächste Zeile erhälst, die du einfärben musst, kannst du dich solange an den Zwillingsknoten entlanghangeln, bis du eine Zeile gefunden hast.

Code:

var objNextTR = tr.nextSibling;
while(objNextTR.nodeName.toLowerCase() != "tr"){
  objNextTR = objNextTR.nextSibling;
}
bjNextTR.style.backgroundColor = col;

Ciao
Quaese

✔ Alle Zellen Einfärben

Sven Mintel

Mitglied

Thomas_Jung

Erfahrenes Mitglied

Thomas_Jung

Erfahrenes Mitglied

Thomas_Jung

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge