69

私はこれを自分でハックすることができますが、ブートストラップにはこの機能があると思います。

4

7 に答える 7

69

jQueryを使用すると、それは非常に簡単です。v2.0は、tableすべてのテーブルでクラスを使用します。

$('.table > tbody > tr').click(function() {
    // row was clicked
});
于 2012-04-04T00:19:02.823 に答える
57

この機能をブートストラップに追加するjavascriptプラグインがあります。

含まれている場合rowlink.jsは、次のことができます。

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

テーブルは、最初の列だけでなく行全体をクリックできるように変換されます。

于 2012-07-25T10:36:43.843 に答える
25

そのコードは、data-href属性が設定されているブートストラップテーブルの行をクリック可能な要素に変換します

注：data-href属性は有効なtr属性（HTML5）hrefですが、tr要素の属性は有効ではありません。

$(function(){
    $('.table tr[data-href]').each(function(){
        $(this).css('cursor','pointer').hover(
            function(){ 
                $(this).addClass('active'); 
            },  
            function(){ 
                $(this).removeClass('active'); 
            }).click( function(){ 
                document.location = $(this).attr('data-href'); 
            }
        );
    });
});
于 2015-03-18T17:56:01.190 に答える
6

モーダルウィンドウを使用した例を示します...モーダルを作成してIDを指定すると、テーブルにtrセクションがあり、下に表示される最初の行を追加するだけです（最初の行に次のように設定することを忘れないでください）これ 

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>
于 2012-07-25T09:41:43.963 に答える
3 
<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">
于 2013-05-25T00:25:40.283 に答える
0

テーブルの行がクリックされたときに関数をアタッチしようとしている可能性があります。

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = functioname(); //call the function like this
}
于 2012-04-04T00:26:11.853 に答える
0

このように、ブートストラップcssを使用して使用できます。すでにいずれかの行に割り当てられている場合は、アクティブなクラスを削除して、現在の行に再割り当てします。

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");
于 2015-03-08T18:06:32.643 に答える