Question

我正在使用Twitter的Bootstrap，其中包括对表行的整洁悬停效果，我想添加用户在行亮起时可以预期的可点击性。有没有万无一失的方法来做到这一点？

是的，我已经完成了我的研究，但每个解决方案都非常尴尬和充其量有缺陷。任何帮助都将非常感激。

Answer 1

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>

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;
}

jQuery

$(document).ready(function() {

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

});

我收到了代码HERE

Answer 2

虽然我的Google技能非常棒，但这是大多数人应该找到的东西...... http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

但是，为了让它变得更容易......如果简单地给行一个id并使用jQuery为该id分配一个链接呢？

<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>

和

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

另见：http://jsfiddle.net/avrZG/

Answer 3

没有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>

Answer 4

目前还不是很清楚你想要做什么，但你可能想要以下内容。将tabindex添加到tr元素将适用于大多数浏览器，并且可以通过鼠标单击或键盘选项卡将焦点设置在一行上。

<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>

HTML可点击表行

4 个答案: