Menu
I've been trying to get the actual rows to be hyperlinked (clickable) but it seems they don't want to be active links, I've searched around on Google and websites say to use the "a href" which I've done but for some reason it isn't working for me, this is a bootstrap layout, if anyone could help me please that would be fantastic, thank you very much
Edit: I've tried adding the "class='clickable-row' data-href='url://link-for-first-row/'" to the tr element but it still doesn't appear to be working, I did try to update the jsfiddle link but when I try to save it to post the link here the jsfiddle data wipes from my screen.
https://jsfiddle.net/r6wctrwk/
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<a href="#">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</a>
<a href="#">
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
</a>
<a href="#">
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</a>
</tbody>
</table>
</div>
385
asked Nov 16 '25 15:11
As per my comment, here is how the link provided by akash will work.
Sample Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<table>
<tbody>
<tr class='clickable-row' data-href='http://google.com'>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
alert("click");
window.document.location = $(this).data("href");
});
});
</script>
</body>
</html>
You can include style something like this
<style>
.clickable-row:hover{
text-decoration: underline;
cursor: pointer;
}
</style>
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
