Making a Table Row clickable

Question

I wonder what the best way to make an entire tr clickable would be?

The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).

While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.

So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?

Answer 1

If you don't want to use javascript, you can do what Chris Porter suggested by wrapping each td element's content in matching anchor tags. Then set the anchor tags to display: block and set the height and line-height to be the same as the td's height. You should then find that the td's touch seamlessly and the effect is that the whole row is clickable. Watch out for padding on the td, which will cause gaps in the clickable area. Instead, apply padding to the anchor tags as it will form part of the clickable area if you do that.

I also like to set the row up to have a highlight effect by applying a different background color on tr:hover.

Example

For the latest Bootstrap (version 3.0.2), here's some quick CSS to show how this can be done:

table.row-clickable tbody tr td {
    padding: 0;
}

table.row-clickable tbody tr td a {
    display: block;
    padding: 8px;
}

Here's a sample table to work with:

<table class="table table-hover row-clickable">
    <tbody>
        <tr>
            <td><a href="#">Column 1</a></td>
            <td><a href="#">Column 2</a></td>
            <td><a href="#">Column 3</a></td>
        </tr>
    </tbody>
</table>

Here's an example showing this in action.

Answer 2

I have found this solution which works quite well:

$(document).ready(function() {
    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");

        if(href) {
            window.location = href;
        }
    });
});

Just don't forget to style the cursor as a pointer on tr:hover

#table tr:hover {cursor: pointer;}

Source: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

Answer 3

With jQuery you can do something along these lines:

$('tr').click(function () {
  $(this).toggleClass('highlight_row');
}); 

Then add a highlight_row to your CSS file and that row will change its class to highlight_row. You could swap out whatever you want to do in that line (as well as change $('tr') to fit your specific row.

Answer 4

"

The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).

"

The onclick-command should look like this:

onclick="window.location.href='bla.html';"

And it isn't necessary to do anything onmouseover/-out about the cursor as a cursor-property only works when the mouse is hovering the element:

style="cursor:pointer;"

Answer 5

If your table does not have links inside, following trick should work.

Put entire table into a link and change the href attribute of the link in rows onmouseover events.

Demo code:

<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
    <tr onMouseOver="setLink(this);"><td>first row</td></tr>
    <tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a> 

Answer 6

If your targeted browsers all support CSS Table display styles, you can use Javascript to wrap each row in an <a> tag styled to function as a <tbody>.

Here's some JS code using jQuery to make it happen: (jsfiddle)

$(function() {
  $('.table-linked').each(function() {
    var table, tbody;
    table = this;
    tbody = $('tbody', this);
    tbody.children().each(function() {
      var href, row;
      row = $(this);
      href = row.attr('data-href');
      $('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
    });
    tbody.remove();
  });
});

This code will transform a table that looks like this:

<table class="table-linked">
    <tbody>
        <tr data-href="/a"><td>a</td><td>1</td></tr>
        <tr data-href="/b"><td>b</td><td>2</td></tr>
    </tbody>
</table>

Into this DOM structure in the browser:

<table>
    <a href="/a" style="display: table-row-group">
        <tr><td>a</td><td>1</td></tr>
    </a>
    <a href="/b" style="display: table-row-group">
        <tr><td>b</td><td>1</td></tr>
    </a>
</table>

Browsers don't seem to be capable of parsing this structure as HTML code (and needless to say it won't validate), it needs to be constructed using JS