Limit to <tbody> in this row-highlight script?

Hello,

  An expert here helped me a while back with a "roll-over highlight" and "onclick 'sticky' highlight" for table rows. It works really well, but I need to know how to limit the effects to <tbody></tbody> elements only.

  The roll-over already is confined, but the onclick 'sticky' highlight will change any row it is invoked on. Any ideas? Here are the scripts:

<script language ="Javascript" type="text/javascript">

  var activeRow = null;

  function setActiveRow(e) {
    var theRow = (e.target)?e.target:e.srcElement;
    while(theRow&&theRow.nodeName!="TR"){
      theRow=theRow.parentNode;
    }
    if(theRow){
      if(activeRow){
        if(activeRow==theRow){
          activeRow.className = "bg_over";
          activeRow.setAttribute("oldClass","bg");
          activeRow = null;
          return;
        } else {
          activeRow.className = "bg";
        }
      }
      activeRow = theRow;
      activeRow.className = "bg_selected_over";
      activeRow.setAttribute("oldClass","bg_selected");
    }
  }

function init(){
  var theTab = document.getElementById("myTable");
  var row = theTab.getElementsByTagName('tbody')[0].rows;
  for(var i=0;i<row.length;i++){
     row[i].className = "bg";
     row[i].onmouseover = function(){
       var oldClass=this.className;
       this.setAttribute("oldClass",oldClass);
       this.className = oldClass+"_over";
     }
     row[i].onmouseout = function(){
       var oldClass=this.getAttribute("oldClass");
       this.className = oldClass;
     }
  }
}
onload=init;
</script>

  One other thing, this seems to work in every browser I have tested, but it is a little slow in IE. There is a slight delay in the mouseover, and it is easy to 'outrun' the effect. Is there a way to 'speed it up' or is this just an IE quirk?
TunaMaxxAsked:
Who is Participating?
 
ZvonkoSystems architectCommented:
In the setActiveRow() function change this if-condition:
    if(theRow){

To this:
    if(theRow&&theRow.parentNode.nodeName=="TBODY"){



0
 
ZvonkoSystems architectCommented:
It looks like my code. Tell me please what elements of table are NOT betwean tbody section? Do you have tHead and tfoot on your table?
Doesn't this already take only rows of tbody: var row = theTab.getElementsByTagName('tbody')[0].rows;
Sorry, but I do not understand the first part of your question.
The second part with the speed up I understand, but I have no idea aboiut it.
0
 
TunaMaxxAuthor Commented:
Zvonko! Yes, as a matter of fact it was you that helped me with this last time.

For the 'rollover' effect (where the rows highlight as you pass the mouse over them), the tbody limitation works perfectly. However, the 'onclick' highlight on, then 'onclick' to turn off a highlighted row is not constrained to the tbody elements. The page I am trying to work this out for is here:

http://www.surreyinahurry.com/NASCAR/ee_demo.php

The first and last rows (in thead and tfoot tags respectively) are still affected by the onclick highlighting.

Hopefully, this makes more sense now.
0
 
TunaMaxxAuthor Commented:
Perfect!

Thank you very much!
0
 
ZvonkoSystems architectCommented:
You are welcome.
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.