0

我正在使用 Twitter 的 Bootstrap，它包括表格行的简洁悬停效果，并且我想添加用户在一行亮起时所期望的可点击性。有什么万无一失的方法吗？

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

4

4 回答 4

3

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

});

我在这里得到了代码

于 2013-09-10T07:27:14.140 回答
2

虽然我的谷歌技能非常棒，但这是大多数人应该找到的...... 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/ ​</p>

于 2012-08-24T20:38:19.687 回答
0

没有 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>
于 2013-07-12T10:34:30.277 回答
0

目前尚不清楚您要做什么，但您可能想要以下内容。将 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>
于 2013-10-08T08:19:21.077 回答