Solved

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

Posted on 2008-06-21
10
810 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now