[Javascript] Check boxs and table row back ground colors

[paul at juniperwebcraft.com (Paul Novitski)]

At 11:21 PM 4/24/2006, Peter Brunone wrote:
>    When you assign style attributes with Javascript, you replace 
> the hyphenated syntax with camel casing (which is probably a 
> misnomer on my part, so I apologize).

No, I think camel-casing (camelCasing!) is the right term.


><script language="javascript" type="text/javascript">
>onclick="checkColor(this)"
>
>function checkColor(chkRow) {
>    var theRow = chkRow.parentNode.parentNode;
>
>    if(chkRow.checked) {
>       theRow.style.backgroundColor = "#123456";
>       }
>    else {
>       theRow.style.backgroundColor = "#654321";
>       }
>    }
></script>


I have two suggestions:

1) Don't assume how deeply embedded the checkbox is (it might end up 
nested inside a div inside that td).  Just climb up until you reach it:

         var oParent = this.parentNode;

         while (oParent.nodeName != "TR")
         {
                 oParent = oParent.parentNode;
         }

2) Don't assign specific styles such as colors in your 
script.  Instead, separate them out into your stylesheet so folks can 
tweak the cosmetic appearance of the page without having to mess with 
the script:

         if (chkRow.checked)
         {
                 theRow.className = "checkedRow";
         }
         else
         {
                 theRow.className = "uncheckedRow";
         }

Regards,
Paul