[Javascript] Check boxs and table row back ground colors

[Peter Brunone]

		Um... I won't throw anything into your ducts.  Just don't bring it up again.

   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).  Therefore, 

this.style.background-color='#123456';

would become

this.style.backgroundColor='#123456';

   Now there's the little matter of the event handler you're trying to use :)  Checkboxes don't have an "onselect" event... so you'll have to settle for onclick (with a possible onkeydown to handle users who tab to the checkbox and hit spacebar).

onclick="this.style.backgroundColor='#123456';"

   Of course this still doesn't take into account whether the box is being checked or not, so we should probably encapsulate this whole crazy thing into a function and call that.  Also, since you want to change the background of the *row* and not the checkbox, we should probably assign the color to that, eh?

<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>

   This is completely untested (just whipped out off the top of my head), but it should get you really close.  As for references, the W3C should have refs for everything that you mentioned below.  Have you tried a bit of googling, perhaps using the -site parameter?

Cheers,

Peter

						From 
				: "Abyss - Information"  

				Info at Abyss.ws 

				Hey all, 

				I have a question for all the scripted gifted.  

				I have a table (with table rows....yes amazing...) 

				anyway in this table i have check boxs(which people will tick for what they desire), what I wish to do is when a particular box is ticked for that entire "tr" to be colored a different color from the rest 

				like a highlight the row sort of thing. 

				the page is XHTML 1.1 strict compliant (which every page should be - *ducts from the objects that non compliant people throw*) 

				how would i achieve this? 

				I have been fiddling around with this  

				<tr>
    <td> 

				        <input id="chkbxID<%=rs("ID")%>" name="chkbxID" type="checkbox" value="<%=rs("ID")%>" onselect="this.style.background-color='#123456';" /> 

				    </td>
    <td><%=rs("Title")%></td> 

				</tr>  

				but with no-luck- any ideas? 

				Also just off this topic on a side note 

				for CSS2 there is a property index (http://www.w3.org/TR/REC-CSS2/propidx.html) is is a fantastic reference page for all the CSS styles 

				is there any sort of reference like this on the DOM or javascript? if so can you link me please..thanks heaps 

				Thanks heaps 

				Abyss 


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060424/1659fc23/attachment.htm>