Inside Technique : Table Highlights : Highlights Details

The table on the first page is defined using the COL, TH, and other table elements as follows:

<TABLE ONSELECTSTART="return false" 
       ONMOUSEOVER="checkHighlight(true)" 
       ONMOUSEOUT="checkHighlight(false)" 
       CELLSPACING=0>
<COL WIDTH=100><COL WIDTH=100><COL WIDTH=100>
<THEAD>
  <TR>
    <TH>Column 1</TH>
    <TH>Column 2</TH>
    <TH>Column 3</TH>
  </TR>
</THEAD>
<TBODY>
  <TR>
    <TD>Item 1</TD>
    <TD>Item 2</TD>
    <TD>Item 3</TD>
  </TR>
  ...
</TBODY>
</TABLE>

The appearance of the table and the highlights are specified using CSS. These properties can be modified to create your own custom table.

<STYLE>
  TABLE {border: 1pt lightgrey solid}
  TH {background: lightgrey; color: darkred; 
      border: 2px lightgrey outset; 
      cursor: default}
  TD {border-right: 2px lightgrey solid}
  .cover {background: navy; color: yellow}
  .rover {background: black; color: white}
</STYLE>

The .cover and .rover styles define the column and row highlights. If desired, you can define the same style for both highlights by having them share a single style sheet rule:

  .rover, .cover {background: black; color: white}

Now, the last step is to apply the appropriate code to the table. If you look back at the HTML for the table, you will notice that an onmouseover and onmouseout event handler is defined. Each time the mouse enters and exits an HTML element within the table, the function checkHighlight is called. This function examines what row or column the mouse is over and highlights it. The complete code for this function is listed below:

  var rowHighlight = true // turn on row highlights
  var colHighlight = true // turn off row highlights

  function getElement(el) {
    var tagList = new Object
    for (var i = 1; i < arguments.length; i++)
      tagList[arguments[i]] = true
    while ((el!=null) && (tagList[el.tagName]==null))
      el = el.parentElement
    return el
  }

  function checkHighlight(which) {
    var el = getElement(event.srcElement,"TH","TD")
    if (el==null) return
    if ((el.tagName=="TH") && (colHighlight)) {
      var idx = el.cellIndex
      var table = getElement(el, "TABLE")
      var column = table.all.tags("COL")[idx]
      if (which)
        column.className="cover"
      else
        column.className=""
    }      
    if ((el.tagName=="TD") && (rowHighlight)) {
      var row = getElement(el, "TR") 
      var table = getElement(row, "TABLE")
      if (which) 
        row.className = "rover"
      else
        row.className = ""
      cache = row
    }
  }

The checkHighlight function works by first finding the cell the mouse is over. The getElement() function is designed to walk up the HTML document from the specified element and returns any elements that match the passed in set of tag names. For example, the first call that passes in "TH" and "TD" locates and returns the cell the mouse is over (the srcElement represents the HTML element that contains the text the mouse is over). This function is used a few times to next locate the row, and eventually the table for the mouse position.

Next, if the mouse is over a TH cell, and column highlighting is enabled, the column is highlighted. Highlighting columns requires a little work because the table does not expose a columns collection. Instead, the cellIndex is used to determine what column the cell is in, and then the appropriate COL element is found that represents the cell's column.

When the mouse is over a TD cell and row highlighting is enabled, the row can be found more directly by looking at the parent of the TD element. Unlike working with columns, there is no need to locate the row indirectly.

Next, we finish this article with a demonstration on how column highlighting may be used with databinding. In the following example, we have a (shortened) list of our favorite links. As the mouse moves over the column headers, the columns are highlighted. By clicking on a column header, the column will be sorted.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.