Solved

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

Posted on 2006-07-09
5
392 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
Suggested Courses

617 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