Menu
What is the best way to make a row of an HTML table a link? I currently am using jquery to zebra stripe the rows and also to highlight the onmouseover/off selected row, so if JavaScript is the answer, please use jquery.
680
rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a. mainlink" A cell can be excluded by adding the . rowlink-skip class to the <td> .
Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.
You can put the anchor inside the td and then set the anchor to display:block and it will fill the table cell. e.g. However if your design is more complicated than that then you can't put block level elements inside that anchor. You would then need to use javascript for IE6 as it only understands hover on anchors.
I just use css:
<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
<td><a href="#">Linky1</a></td>
<td><a href="#">Data1</a></td>
</tr>
<tr>
<td><a href="#">Linky2</a></td>
<td><a href="#">Data2</a></td>
</tr>
</table>
$(document).ready(function(){
$("tr").click(function(){
/* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */
window.location = $(this).attr("url");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
