Solved

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

Posted on 2006-07-09
5
391 Views
Last Modified: 2006-11-18
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?
0
Comment
Question by:TunaMaxx
[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
  • 3
  • 2
5 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17069517
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
 

Author Comment

by:TunaMaxx
ID: 17069610
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 17070849
In the setActiveRow() function change this if-condition:
    if(theRow){

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



0
 

Author Comment

by:TunaMaxx
ID: 17070962
Perfect!

Thank you very much!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17071623
You are welcome.
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

729 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