Easy Table Reading in JavaScript | 3

[previous]

Easy Table Reading in JavaScript

Finally, we arrive at the “onclick” event. First, we check to see if the variable “rClick” is defined; since we declared it, but didn’t define it, this test will fail the first time. Because it will fail, none of the code inside the if statement will run the first time. The function goes on to set the class of the current row to “click,” the variable “rClick” to equal the current row, and it clears the “onMouseOut” function by resetting it to just “return true” every time. Anytime that the “onclick” event is triggered after that, no matter what row is clicked, “rClick” will be defined. Therefore, the code in the if statement will run from here onwards. This code will reset the last row that was clicked to its original state; so that it’s no longer selected (its class will now be either “on” or “off”). It also resets the onMouseOut function to what it was before we cleared it when the row was clicked. This way, we reset the last clicked row each time in order to allow a different row to be selected. So if one row is selected, that row becomes deselected when a new one is clicked. If no row is selected, it will simply select whichever row was clicked.

Do You Want More?

What other ways can we enhance usability through JavaScript when styling specific rows? So far, we have (1) alternated styles between rows, (2) highlighted rows onMouseOver, and (3) selected rows. Although we’ve done almost everything possible to enhance usability, some may find it frustrating that they can only select one row. Why can’t we select as many rows as we want, and deselect whichever ones we choose? The following code will help to provide multiple points of reference:

  <script type="text/javascript"><!--
    var elem = "TR";

window.onload = function(){
  if(document.getElementsByTagName){
    var el = document.getElementsByTagName(elem);
      for(var i=0; i<el.length; i++){
        if(el[i].childNodes[0].tagName != "TH"
        && el[i].parentNode.parentNode.className.indexOf("tbl") != -1){
      if(i%2 == 1){
        el[i].className = "on";
        el[i].oldClassName = "on";
        el[i].onmouseout = function(){
                this.className = "on";
        }
    } else {
        el[i].className = "off";
        el[i].oldClassName = "off";
        el[i].onmouseout = function(){
                this.className = "off";
        }
    }
        el[i].onmouseover = function(){
            if(this.className == this.oldClassName)
               {this.className = "hover";}
            if(this.onmouseout == null && this.className != "click"){
          this.onmouseout = function(){
                this.className = this.oldClassName;
          }
             }
}
el[i].onclick = function(){
         if(this.className != "click"){
            this.className = "click";
    } else {
            this.className = this.oldClassName;
         }
       this.onmouseout = null;
     }
    }
   }
  }
}
   //--></script>

See the following example.

This time we aren’t going to need to deselect a row if a different one was selected, so there’s no need for the “rClick” variable. Instead, we’re going to just select whichever row is clicked and deselect whichever row is clicked if it is clicked. The only difference between this code and the previous code is the “onMouseOver” and “onClick” functions, so those are the only two I’ll be covering.

Starting with onMouseOver: we check to see if the current class name of the current element is equal to the old class name. If it is, we apply the hover effect. If the current row has been clicked, but is not selected (does not have the “click” attribute), it resets the “onMouseOut” function to what it was previously. The “onMouseOut” function will be null (“nothing”) if it has been clicked, because at the end of the “onClick” function, we clear “onMouseOut” by setting the function to null. This will prevent it from losing the selection when we take our mouse off of it.

OnClick: if the current row is not selected, select it. Otherwise, deselect it by setting its class name to what it was previously. Regardless of whether or not the row was selected, clear the “onMouseOut” function.

Conclusion

It’s important to note that this code may be of additional use when placed in a common JavaScript includes file, since you can control which tables are formatted by the code with the “class” attribute. It’s a good idea to experiment with using table cells (“TD”) instead of table rows (“TR”). This should be especially useful to those of you who run large corporate sites and have to squint or use some sort of pointing device to determine which line you were reading. Worse, when you look away from the screen, it is very difficult to find the correct row again. The JavaScript code presented in this article is intended to enhance usability and readability by adding extra functionality to your tabular information.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com

Created: March 27, 2003
Revised: December 09, 2004

URL: https://webreference.com/programming/javascript/Jf/column71