Ask the CSS Guy

Sangeeta wrote about a matrix she'd like to create that would give an indication of relationships among the information provided. She elaborates:

...For example - clicking on a cell should highlight the associated cell in the top row and left most column.

One good example is orbitz.com.

(You have to actually perform a search to see the actual matrix.) The top row consist of the airline names and the left column is non-stop, 1 stop or 2 stop flight...as you move your cursor, the color of the associated top cell and left most cell changes to yellow...

Nice idea. I'll cover one way to create the effect using JavaScript and CSS. (For those who have been here before, I realize there is lots of repeated material here from my previous post, but that's the good thing about reusable JavaScript... it's reusable in different situations!)

For those who like to skip ahead: view the final example

Getting Started

A table of this type has headings across the top as well as down the left side. I'll use a thead with th's across the top, line the left column of the tbody with th's, too. like so:

View example 1, the bare table.

Who are we kidding? View example 2, a styled table.

Next Step: Add class

To help establish the relationship between cells, add classes. (This will be used by the JavaScript to know which cells to highlight.

<table>
  <thead>
    <tr>
      <th class="null">
      <th class="stones">
      <th class="u2">
      <th class="crue">
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>
      <td class="stones">
      <td class="u2">
      <td class="crue">
    </tr>
    ...
  </tbody>
</table>

View example 3, classes added. (Or don't, since there is not much visually different yet).

Next Step: Establish what an selected state looks like

I'm going to use class="on" again to add the highlight to the appropriate cells.

<table>
  <thead>
    <tr>
      ...
      <th class="u2 on>
      ...
    </tr>
  </thead>
  <tbody>
  ...
    <tr>
      <th class="on">
      <td class="stones">
      <td class="u2 on">
      <td class="crue">
    </tr>
   ...
  </tbody>
</table>

and the CSS...

tbody td.on {background:#f3f0e4;}
thead th.on {background:#ffe068;}
tbody th.on {background:#ffe068;}

View example 4, the selected state.

Next Step: Using JavaScript

We can't really use :hover to make this stuff work. Instead, we're going to highlight the appropriate cells using onmouseover and onmouseout events.

In English, here's what we want to happen:

1. When someone hovers over the Nikki Sixx table cell
2. add class="on" to the Nikki Sixx cell
3. as well as adding class="on" to the "Mötley Crüe" and "Bass Guitar" cells.
4. When someone moves their mouse away from that cell, remove class="on" from all of those cells we just added to previously.

Here are the tools needed to do that:

• A javascript function called getElementsByClassName, which allows us to target elements based on their class value. (via Robert Nyman)
• A javascript function called addClassName (via Robert Nyman). This function will be used to add "on" as a class name to our desired cells.
• A javascript function called removeClassName, (via Robert Nyman). This is used to unselect cells by removing the "on" value from their class attributes
• A custom javascript function to tie the behavior together.
• A javascript function called addLoadEvent (via Simon Willison), which is just a way of attaching these behaviors when the page loads instead of putting onmouseover and onmouseout event attributes to every cell by hand.

And here's the end result - view example 5, the final product. Just view source to copy it and take it with you.

See also

I could see how someone could want to apply highlights to entire rows and entire columns (as opposed to just the header cell of that row or column)... it wouldn't be a long stretch from this (corresponding how-to post found here).

Also, here's a way to indicate relationships similarly to what is described above, but without JavaScript.