Here’s a little script (and some CSS) that turns an entire block (in this case a TR) into a click-able item:
Here’s the JavaScript/CSS (the HTML is just a plain table with a link in each row and an id of “targetTable”):
<script type="text/javascript">
//we set the event listeners here so as to keep the markup clean
window.onload = function()
{
//get the rows from the target table.
var rows=document.getElementById("targetTable").getElementsByTagName("TR");
for (i=0;i<rows.length;i++)
{
//set the listeners and put the one quick line that drives the whole thing in place
//All we do is get the TR's first anchor child's HREF and use that to change the location
setFunction(rows[i],'onclick','document.location=this.getElementsByTagName("a")[0].href');
}
}
function setFunction(theObj,theEventHandler,theFunction)
{
if (typeof(theObj) == "string")
{
theObj = document.getElementById(theObj);
}
theObj[theEventHandler]=new Function(theFunction);
}
</script>
<style type="text/css">
<!--
#targetTable {
border-collapse:collapse;
}
// make it look more actionable with the "click me" hand
#targetTable td {
border-bottom:1px solid #999;
padding:2px;
cursor: pointer;
_cursor: hand;
}
//and, in browsers that handle the :hover pseudo class on arbitrary elements
//give it a nice little mouseover to heighten the "click here" message
#targetTable tr:hover {
background: #FFFFCC;
}
-->
</style>