CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Shawn Erquhart
Shawn Erquhart

Reputation: 1858

HTML Clickable Table Rows

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.

Upvotes: 1

Views: 12460

Answers (4)

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

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>

Upvotes: 0

Syed
Syed

Reputation: 16513

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

Upvotes: 3

swmcdonnell
swmcdonnell

Reputation: 1421

Without jQuery:

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

Upvotes: 0

Sebass van Boxel
Sebass van Boxel

Reputation: 2602

Although my Google-skills are pretty awesome this is something most people should find... http://www.electrictoolbox.com/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.com/questions/12115550/html-clickable-table-rows";
});
$("#link2").click(function(){
window.location = "http:///stackoverflow.com";
});

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

Upvotes: 2

Related Questions