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
Convert Table to Hyperlinks
Eric
<script type="text/javascript">
function link(){
window.location.href="http://www.yahoo.com";
}
</script>
<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="link()">
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
Eric
Great code. I have found that you can use this code in the table tag itself while using image rollovers for the entire table:
<script type="text/javascript">
function link(){
window.location.href="http://www.yahoo.com";
}
</script>
<style type="text/css">
<!--
.on {background-image: url(images/image1.jpg); }
.off {background-image: url(images/image2.jpg); }
-->
</style>
<body>
<table class="off" onMouseOver="this.className='on'"
onMouseOut="this.className='off'" width="800" height="40" border="0" cellpadding="0" cellspacing="0" onclick="link()">
<tr>
<td>some content</td>
</tr>
<table>
</body>
I would be interested in talking to you about a coding issue I am having involving .php amd mySQL using the above code. If you are interested, please email me and I will give you my number, or you can give me yours.
Thanks,
Doug
link="www.google.com"
and changed the onclick to:
onclick="window.open(this.link,'newwindow', 'width=475,height=400,scrollbars=yes,screenX=190,screenY=130,left=190,top=130');return false;"