Solved

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

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

746 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

16 Experts available now in Live!

Get 1:1 Help Now