web-dev-qa-db-ja.com

表の行を選択し、Twitter Bootstrap

Twitter Bootstrapテーブルの上にカーソルを合わせると強調表示されるクリック可能な行があります（これが簡単になった場合、カーソルを移動する機能を削除できます）。選択した行を別の行をクリックするか、再度クリックします。

    $( document ).ready(function() {
        $('#myTable').on('click', 'tbody tr', function(event) {
            //  console.log("test ");                   
        });

そしてテーブル

<table class="table table-bordered table-hover" id="myTable">
    <tbody>
        <tr>
        <tr class='clickable-row'>

私はJSでこのコードを試しましたが、動作しませんでした

$(this).addClass('highlight').siblings().removeClass('highlight');
jquerycsstwitter-bootstraptwitter-bootstrap-3
18
Jabda

あなたはとても近いです。 $("#myTable").on(...)イベントで.clickable-rowクラスをターゲットにし、Bootstrapの.activeクラスを使用するとうまくいくはずです：

HTML：

<table class="table table-bordered" id="myTable">
  <tr class="clickable-row">
    <th>Example</th>
  </tr>
   <tr class="clickable-row">
    <th>Example 2</th>
  </tr>
</table>

Javascript：

$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active').siblings().removeClass('active');
});

ブートプライの例

注：テーブルに.table-hoverを残した場合、.active（ blue hightlight になる）など、.bg-infoとは異なるクラスを使用する必要があります。 =）

行からハイライトを削除する（つまり、もう一度クリックする）には、行にクラスがあるかどうかを確認して削除します。

$('#myTable').on('click', '.clickable-row', function(event) {
  if($(this).hasClass('active')){
    $(this).removeClass('active'); 
  } else {
    $(this).addClass('active').siblings().removeClass('active');
  }
});

元の情報については、@ BravoZuluの回答を参照してください。

47
Tim Lewis

試してください：

$(".clickable-row").click(function(){
    if($(this).hasClass("highlight"))
        $(this).removeClass('highlight');
    else
        $(this).addClass('highlight').siblings().removeClass('highlight');
})
7
BravoZulu

色のペイントされた行を表示し、選択されていることを示すには、data-row-style = 'formatterRowUtSelect'

コード内に、このメソッドを追加できます。

formatterRowUtSelect = function (row, index) {
    if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())
        return {classes: 'row-selected'};
    return {};
}

選択した行のCSSを作成することを忘れないでください：

.row-selected {
    background-color: #a9f0ff !important;
    font-weight: bold;
}

ごあいさつ、お役に立てば幸いです。

2
RyuSaky

ブートストラップテーブルでこのスクリプトを使用しました。

$('#tb-pegawai').on('change', 'tr' , function (event) {
            if($('.selected')){ // } })
0
Sumari Marco