|Written by||Imar Spaanjaars|
|Listened to||The State We're In by The Chemical Brothers (Track 7 from the album: Come With Us)|
Are you looking to hire an experienced software developer or .NET consultant? Then get in touch with me through my company's web site at devierkoeden.com
Found an interesting article on this site? Got inspired by something you read here? Then consider making a donation with PayPal.
Like this article? Or do you think it sucks? Make yourself heard by casting your vote below.Total number of ratings: 410
Update 7/28/2010: I just wrote a new version of this article using jQuery. You can find the new article here.
It's a common scenario to display an HTML table with items, like products, employees and so on, and then link each item to a detail page where you can display the full details of this item.
Often when people try to implement this behavior, they try to add an HTML link to each table cell, like this:
<table> <tr> <td><a href="Details.asp">John</a></td> <td><a href="Details.asp">Doe</a></td> </tr> </table>
The disadvantage of this method is that not the entire table cell is linked, but just the text in that cell. You also need to add a lot of extra code to make each cell clickable.
On each <tr> element I have added the onclick attribute that calls the DoNav method. This will take the user to a new page whenever the user has clicked somewhere in the table row. To change the color of the rows when the mouse hovers over the table, I have also added the onmouseover and onmouseout attributes that call the ChangeColor method to change the background color of the table row.
You can check out a working example of this code. In the example I also added a bit of CSS to influence the borders of the table, so each row has a nice thin black border at the top and bottom side, but not between the columns on the left and right side. Look at the source of the page in the browser to see how it is done.
Wonder where to go next?
You can read existing comments below
or you can post a comment yourself on this article
Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.
I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.
When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.
For more information about the Talk Back feature, check out this news item.
Unfortunately, something went wrong and your message or comments have not been submitted successfully.
There's a fair chance things broke down because you tried to post something that looks like HTML. Things that look HTML include (X)HTML, obviously, XML, ASP.NET markup and c# generics syntax as all of them use the < and > characters.
If that's the case, try altering your message and remove anything that looks like an angled bracket. You can replace them with [ and ] for example so you can still make it look like HTML to some extend.
If, on the other hand, you were trying to spam this web site, I am pretty glad I caught you in the act and stopped you from doing so ;-)
The number you entered is not correct. Please enter the sum of the two numbers again.