I'm using Twitter's Bootstrap, which includes a neat hover effect for table rows, and I would like to add the clickability that users will expect when a row lights up. Is there any foolproof way to do this?

Yes I've done my research, but every solution is extremely awkward and flawed at best. Any help would be most appreciated.

I'm using Twitter's Bootstrap, which includes a neat hover effect for table rows, and I would like to add the clickability that users will expect when a row lights up. Is there any foolproof way to do this?

Yes I've done my research, but every solution is extremely awkward and flawed at best. Any help would be most appreciated.

• javascript
• html
• twitter-bootstrap

• So what do you want? The tables rows to be able to be clicked after they light up? – PitaJ Commented Aug 24, 2012 at 19:35
• What is this click supposed to do? – Diodeus - James MacFarlane Commented Aug 24, 2012 at 19:36
• Stuff you cannot possibly fathom, @Diodeus... Stuff you cannot possibly fathom. – Mike Christensen Commented Aug 24, 2012 at 19:40
• 1 Yes I've done my research You also have to post it. – Waleed Khan Commented Aug 24, 2012 at 19:42
• You need to specify what you mean by add the clickability, any element on the page is clickable, you just need to know what to do with that click. – Hazem Salama Commented Aug 24, 2012 at 19:53

4 Answers 4

The HTML

<table id="example">
<tr>
    <th>&nbsp;</th>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
</tr>
<tr>
    <td><a href="apples">Edit</a></td>
    <td>Apples</td>
    <td>Blah blah blah blah</td>
    <td>10.23</td>
</tr>
<tr>
    <td><a href="bananas">Edit</a></td>
    <td>Bananas</td>
    <td>Blah blah blah blah</td>
    <td>11.45</td>
</tr>
<tr>
    <td><a href="oranges">Edit</a></td>
    <td>Oranges</td>
    <td>Blah blah blah blah</td>
    <td>12.56</td>
</tr>
</table>

The CSS

table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

The jQuery

$(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

I got the code HERE

Although my Google-skills are pretty awesome this is something most people should find... http://www.electrictoolbox./jquey-make-entire-table-row-clickable/

But, to make it a lot easier... What about simply giving the row an id and assigning a link to that id with jQuery?

<table>
<tr id='link1'>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
</tr>
<tr id='link2'>
    <td>two-one</td>
    <td>two-two</td>
    <td>two-three</td>
    <td>two-four</td>
</tr>
</table>​

​and

$("#link1").click(function(){
window.location = "http://stackoverflow./questions/12115550/html-clickable-table-rows";
});
$("#link2").click(function(){
window.location = "http:///stackoverflow.";
});

also see this: http://jsfiddle/avrZG/ ​

Without jQuery:

<table>
<tr id='link1' onclick="document.location='http://stackoverflow./about';">
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
</tr>
<tr id='link2' onclick="document.location='http://stackoverflow./help';">
    <td>two-one</td>
    <td>two-two</td>
    <td>two-three</td>
    <td>two-four</td>
</tr>
</table>

It is not very clear what you are trying to do but you probably want the following. Adding a tabindex to the tr elements will work in most browsers and make it possible to set focus on a row via mouse click or keyboard tab.

<table>
    <tr id='link1' tabindex="100">
        <td>one</td>
        <td>two</td>
        <td>three</td>
        <td>four</td>
    </tr>
    <tr id='link2' tabindex="101">
        <td>two-one</td>
        <td>two-two</td>
        <td>two-three</td>
        <td>two-four</td>
    </tr>
</table>