how to make a whole row in a table clickable as a link?

Question

I\'m using Bootstrap and the following doesn\'t work:

    
        
            Blah Blah
           


        

Answer 1

You can't do that. It is invalid HTML. You can't put a <a> in between a <tbody> and a <tr>. Try this instead:

<tr onclick="window.location='#';">
        ...
     </tr>

add style for pointer view

[data-href] { cursor: pointer; }

When you work up to it, you'd want to use JavaScript to assign the click handler outside of the HTML.

Answer 2

You can use onclick javascript method in tr and make it clickable, also if you need to build your link due to some details you can declare a function in javascript and call it in onclick, passing some values.

Answer 3

i would prefer to use onclick="" attribute as it is easy to use and understand for newbie like

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

Answer 4

You could include an anchor inside every <td>, like so:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

You could then use display:block; on the anchors to make the full row clickable.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Example jsFiddle here.

This is probably about as optimum as you're going to get it unless you resort to JavaScript.

Answer 5

Another option using an <a>, CSS positions and some jQuery or JS:

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

Then you need to give the a width, using for example jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

Answer 6

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

Whilst the main solution on here is great, my solution removes the need for classes. All you need to do is add the data-href attribute with the URL in it.