最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML Clickable Table Rows - Stack Overflow

programmeradmin4浏览0评论

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.

Share Improve this question asked Aug 24, 2012 at 19:32 Shawn ErquhartShawn Erquhart 1,8482 gold badges17 silver badges32 bronze badges 6
  • 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
 |  Show 1 more ment

4 Answers 4

Reset to default 3

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>
发布评论

评论列表(0)

  1. 暂无评论