FAQs in the category: JavaScript

Back in 2004, I wrote an article about making a full table row clickable using JavaScript, so you could click anywhere in the table row to browse to a new page. That solution used quite a bit of in-line JavaScript to accomplish that task which adds to the size and complexity of the page. Since then, the JavaScript landscape has changed quite a bit with the introduction of JavaScript libraries such as Prototype and jQuery. Because my initial article is in the top 10 results for "full row select javascript" on Google, I figured it made sense to write a new, cleaner and more modern version of it using one of those libraries: jQuery.

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.

The link is often represented by a button or text link in one of the columns. But to make it easier for your users to select a specific item, you could make the full row clickable. With a bit of JavaScript, this is pretty easy to do.

In HTML, it's pretty easy to preselect an item in a drop-down list. At design-time, or with a dynamic server page, at run-time at the server, all you need to do is add the selected attribute to the <option> element you want to select. If you want to select the item programmatically through JavaScript code, you'll have to follow a different route.