CODEWITHSUNDEEP
htmltwitter-bootstraphyperlink
Emma-May
Emma-May

Reputation: 43

bootstrap hyperlink not working

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>

Upvotes: 4

Views: 4763

Answers (1)

Akki619
Akki619

Reputation: 2432

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>

Upvotes: 1

Related Questions