faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

66 of 82 people (80%) answered Yes
Recently 5 of 10 people (50%) answered Yes

Entry

How can I color the table row a checkbox is in?
How can I color the table row a checkbox is in?

Mar 6th, 2000 07:38
Martin Honnen,


IE4+ and NN6 have full DOM access to climb up the document hierarchy to 
find the TR element a checkbox is in. With NN4 you would need to set up 
the code for row coloring provided in 
http://www.faqts.com/knowledge-base/view.phtml/aid/980/fid/192/lang/
and then hardcode the relationship between every checkbox and every row.
Here is the code for IE4+ and NN6+

<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function highlightRow (element, color) {
  while (element.tagName.toUpperCase() != 'TR' && element != null)
    element = document.all ? element.parentElement : element.parentNode;
  if (element)
    element.bgColor = color;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" ONCLICK="highlightRow(this, 'lime');">
</TD>
<TD>
Kibology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>