Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2006-07-09
5
Medium Priority
?
399 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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

972 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