3

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>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Emma-May
  • 33
  • 1
  • 4
  • 1
    possible duplicate of [how to make a whole row in a table clickable as a link?](http://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link) – akash Sep 03 '15 at 06:55
  • I've tried adding the "class='clickable-row' data-href='url://link-for-first-row/" to the tr element but it doesn't want to work, I've tried to update the jsfiddle link to post here but i'm having some trouble with it. – Emma-May Sep 03 '15 at 07:11
  • @Emma-May the link is absolutely answer to your question. let me give an example in the answer section... – Akki619 Sep 03 '15 at 07:18

1 Answers1

1

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>
Akki619
  • 2,386
  • 6
  • 26
  • 56
  • oh, now i understand what's wrong, your right the link does indeed work (thanks), but when i hover my mouse over the link it doesn't show it's a link (in chrome) is there any way to show it's a link? (edit, what i mean is when i hover my mouse over the link it's not showing as a link in the status at the bottom of the browser) – Emma-May Sep 03 '15 at 07:24
  • thanks for the update, just so i understand is this the "normal" way it works in bootstrap? – Emma-May Sep 03 '15 at 07:32
  • not in bootstrap in general sense of html... anchor has default behaviour set that's why you see link on bottom left when you hover on anchor. – Akki619 Sep 03 '15 at 07:36
  • hi again, can i just confirm is there no way to force the anchor to show the link on the bottom left of the browser when hovering over the link? many thanks – Emma-May Sep 03 '15 at 09:09