javascript - HTML クリック可能なテーブル行

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

});

コードはこちら

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

Answer 3

あなたが何をしようとしているのかはあまり明確ではありませんが、おそらく次のことが必要です。tr 要素に tabindex を追加すると、ほとんどのブラウザで機能し、マウス クリックまたはキーボード タブで行にフォーカスを設定できるようになります。

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

Answer 4

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>