Bird Brains
One day a man goes to a pet shop to buy a parrot. The assistant takes the man to the parrot section and asks the man to choose one. The man asks, "How much is the yellow one?"

The assistant says, "$2000." The man is shocked and asks the assistant why it's so expensive. The assistant explains, "This parrot is a very special one. He knows typewriting and can type really fast."

"What about the green one?" the man asks.

The assistant says, "He costs $5000 because he knows typewriting and can answer incoming telephone calls and takes notes."

"What about the red one?" the man asks.

The assistant says, "That one's $10,000."

The man says, "What does HE do?"

The assistant says, "I don't know, but the other two call him boss."

Make table cells and rows clickable
I have been looking through my logs and I see that a good amount of people do searches on Google for making a table row clickable or a table cell clickable and come to my site. The link they are going to does not explain it well. So I thought I would do a few quick examples and show you how to add some other effects to make it more dynamic.

The first thing you need to do is add an onclick handler to the element. If it is a cell you add it to the td tag. If it is the row, you add it to the tr tag.

This is a basic example to make a table cell clickable:

Test

Test - Click

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Here is an example to make a table row clickable:

Test

Test

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Now how is a person supposed to know that they can click on the cell or the row? It is hard since the cursor stays the same and there are no other visual markers. You can change that by changing the cursor and the background color when the mouse is placed on the row or cell.

Example with table cell:

Test

Test - Click

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Test</td>
    <td onmouseover="this.style.background='red';this.style.cursor='pointer'"
        onmouseout="this.style.background='white';" onclick="alert('bang')">
        Test - Click</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Example with table row:

Test

Test

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onmouseover="this.style.background='red';this.style.cursor='pointer'"
        onmouseout="this.style.background='white';" onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Well I hope this helped you out!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages