Solved

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

Posted on 2008-06-21
10
815 Views
Last Modified: 2008-06-21
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

0
Comment
Question by:hc1619
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21839287
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
 

Author Comment

by:hc1619
ID: 21839302
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
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21839324
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21839329
In case I wasn't clear as to the why:

el.parentNode.parentNode.parentNode
^       ^             ^              ^
|        |              |               |<tr>
|        |              |<td>
|        |<div>
|
<input>
         
0
 

Author Comment

by:hc1619
ID: 21839575
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
 

Author Comment

by:hc1619
ID: 21839644
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
 
LVL 15

Accepted Solution

by:
mr_egyptian earned 500 total points
ID: 21839698
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
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21839700
Should have read:

<input type="checkbox" onclick="toggleall(this);" />
0
 

Author Comment

by:hc1619
ID: 21839721
Great stuff - all working!!  Which answer shall I accept as solution?
0
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21839726
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

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question