Solved

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

Posted on 2008-06-21
10
812 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
  • 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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery datepciker end date add 6 days 6 40
Passport Expiry 3 46
PHP Form Calculate Total Price 10 43
DataTables + iCheck + pagination Issue 2 23
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

803 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