How to highlight a TR row with a checkbox in Firefox?

I have probably gone through 5 different types of code on highlighting a TR row in a table with a checkbox.  ALL of them work in IE, none of them work in FF.  I've reverted back to the original code I was using and have attached a snippet of it - could somebody please tell me why this code is not working in FF (ie, NOT highlighting the TR row).  I also have a checkbox which is meant to tick all the boxes in the form (and highlight all the rows), but FF doesn't want to do that either.
//declare global variables
var rowsSelected = 0;
 
//change the background color of a row when selected and
//also count how many rows are selected
function colorRow(srcElement)
{
  var cb = event.srcElement;
  var curElement = cb;
  while (curElement && !(curElement.tagName == "TR"))
  {
    curElement = curElement.parentElement;
  }
  if (!(curElement == cb) && (cb.name != "cbxSelectAll"))
  {
    if (cb.checked)
    {
      curElement.style.backgroundColor = "#DED8DC";
      rowsSelected = rowsSelected + 1;
    }
    else
    {
      curElement.style.backgroundColor = "";
      rowsSelected = rowsSelected - 1;
    }
  }
}
//color all rows when the main checkbox is clicked
function checkAll(form)
{
  var thisNumRowsSelected = 0;
  var isChecked = document.all.cbxSelectAll.checked;
  for (var i=0; i < form.elements.length; i++)
  {
    if (form.elements[i].name.indexOf('_ctl') > -1)
    {
      var curElement = form.elements[i];
      if (isChecked)
      {
        curElement.checked = true;
        thisNumRowsSelected = thisNumRowsSelected + 1;
        while (!(curElement.tagName == "TR"))
        {
          curElement = curElement.parentElement;
        }
        if (form.elements[i].name != "cbxSelectAll")
        {
          curElement.style.backgroundColor = "#DED8DC";
        }
      }
      else
      {
        curElement.checked = false;
        while (!(curElement.tagName == "TR"))
        {
          curElement = curElement.parentElement;
        }
        if (form.elements[i].name != "cbxSelectAll")
        {
          curElement.style.backgroundColor = "";
        }
      }
    }
  }
  rowsSelected = thisNumRowsSelected;
}
 
------ AND MY CODE IN THE TR
 
<tr>
<td height="40" width="35"><div align="center"><span onClick="javascript:colorRow(this);"><input id="_ctl0" value="123456" type="checkbox" name="_ctl0Instructions" /></span></div></td>
<td>Blah</td></tr>
 
-- AND MY SELECT ALL CHECKBOX
 
<input name="cbxSelectAll" type="checkbox" onclick="javascript:checkAll(this.form);" />

Open in new window

hc1619Asked:
Who is Participating?
 
mr_egyptianCommented:
This function on your "Check All" checkbox should do it. Called the same way:

<input type="checkbox" onclick="toggleall*this();" />
  function toggleall(el){
	  formname=el.form.name;
	  type=el.type;
	  if(el.checked){
		  state="checked";
	  }else{
		  state="";
	  }
	  for(i=0; i<document.forms[formname].elements.length; i++){
		  if(document.forms[formname].elements[i].type==type){
			  document.forms[formname].elements[i].checked=state;
			  toggle(document.forms[formname].elements[i]);
		  }
	  }
  }

Open in new window

0
 
mr_egyptianCommented:
Give this a try.  Tested on iie7, ff3, safari, and opera under winxp.

For each checkbox add:

onclick="toggle(this);"
  function toggle(el){
	  if(el.checked){
		  el.parentNode.parentNode.style.background="#00ff00";
	  }else{
		  el.parentNode.parentNode.style.background="#ffffff";
	  }
  }

Open in new window

0
 
hc1619Author Commented:
Thanks mr Egyptian - that worked, but it only highlighted the TD of the checbox (the TR has a few TD's) .. I attach a code of the TR row.
<tr>
<td height="40" width="35"><div align="center"><input id="_ctl0" value="#final_docs#Instructions_#documents.Instructions#.pdf" type="checkbox" name="_ctl0Instructions" onclick="toggle(this);"></div></td>
<td>Blah blah</td></tr>

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
mr_egyptianCommented:
That's because you have your check box contained within a div within a td, which I didn't notice originally.  That adds another node to the tree, so change toggle to the following.
function toggle(el){
    if(el.checked){
        el.parentNode.parentNode.parentNode.style.background="#00ff00";
    }else{
        el.parentNode.parentNode.parentNode.style.background="#ffffff";
    }
}

Open in new window

0
 
mr_egyptianCommented:
In case I wasn't clear as to the why:

el.parentNode.parentNode.parentNode
^       ^             ^              ^
|        |              |               |<tr>
|        |              |<td>
|        |<div>
|
<input>
         
0
 
hc1619Author Commented:
Thanks - that's great.  What about though my "select all" checkbox and code I had in the original code.. that no longer works.  How can I have a checkbox that will select all above checkboxes (and deselect all when off) and toggles all the row colors at the same time?
0
 
hc1619Author Commented:
The code attached seems to be working in IE, it checks all the checkboxes and toggles the row colors.  in FF however the "select all" checkbox only ticks the first checkbox, leaves all the rest blank , and doesn't even highlight the row that it has ticked.
var rowsSelected = 0;
//color all rows when the main checkbox is clicked
function checkAll(form)
{
  var thisNumRowsSelected = 0;
  var isChecked = document.all.All.checked;
  for (var i=0; i < form.elements.length; i++)
  {
    if (form.elements[i].name.indexOf('_ctl0') > -1)
    {
      var curElement = form.elements[i];
      if (isChecked)
      {
        curElement.checked = true;
        thisNumRowsSelected = thisNumRowsSelected + 1;
        while (!(curElement.tagName == "TR"))
        {
          curElement = curElement.parentElement;
        }
        if (form.elements[i].name != "All")
        {
          curElement.style.backgroundColor = "#DED8DC";
        }
      }
      else
      {
        curElement.checked = false;
        while (!(curElement.tagName == "TR"))
        {
          curElement = curElement.parentElement;
        }
        if (form.elements[i].name != "All")
        {
          curElement.style.backgroundColor = "";
        }
      }
    }
  }
  rowsSelected = thisNumRowsSelected;
}

Open in new window

0
 
mr_egyptianCommented:
Should have read:

<input type="checkbox" onclick="toggleall(this);" />
0
 
hc1619Author Commented:
Great stuff - all working!!  Which answer shall I accept as solution?
0
 
mr_egyptianCommented:
Glad it worked.  Sorry I missed all of the specs.  It doesn't matter which you accept, but the final part is usually best for others seeking a similar solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.