各行の最後の列をクリックしないようにする

私はブートストラップテーブルを使用しています。現在、列をクリックすると警告が表示されます。私が望むのは、何も起こらない最後の列をクリックするときです。あなたの助けに感謝します。各行の最後の列をクリックしないようにする

$('#students tbody').on('click', 'tr.details-control', function() { 
 
    alert('click'); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="students" class="table table-bordered table-striped table-hover"> 
 
<thead> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>....</th> 
 
    <th>Last</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
</tbody> 
 
</table>

出典

2017-06-10 Shyam Shingadiya

'$（ '＃学生がTBODY'）（ 'tr.details-コントロール：ありません（：最後の）' 'クリック' に、機能（）{ 警告（） 'をクリック'; }。）; ' –

私が最初の行をクリックすると、2番目に警告が表示されています。 –

これで何をしたいですか？ –

のような:last-childセレクタで:not()を使用する必要がありますb ELOW： -

$('#students tbody').on('click', 'tr.details-control td:not(:last-child)', function() { 
    alert('click'); 
});

の作業例： -

$('#students tbody').on('click', 'tr.details-control td:not(:last-child)', function() { 
 
    alert('click'); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="students" class="table table-bordered table-striped table-hover"> 
 
<thead> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>....</th> 
 
    <th>Last</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
</tbody> 
 
</table>

出典

2017-06-10 07:12:43

@ Aliveさん、ありがとうございました。 –

@ShyamShingadiyaあなたを助けてうれしい:) :) –

最終的に私は 'tr'だけをターゲットにしていたので、問題が発生します。 –

これを追加します。

$('td:last-child').click(function(event) { 
    event.preventDefault(); 
});

出典

2017-06-10 07:08:11 Blarzek

あなたはそのようなtd要素にイベントを追加することができます。

$('#students tbody').on('click', 'tr.details-control td:not(:last)', function() { 
    alert('click'); 
});

出典

2017-06-10 07:10:34

@Goran、ありがとうございました。 –

$(function(){ 
 
$('table').on('click','td:not(:last-child)',function(){ 
 
alert('hi') 
 
}) 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
</head> 
 
<body> 
 

 
<table class="table table-bordered table-striped table-hover"> 
 
<thead> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>....</th> 
 
    <th>Last</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
    <tr class="details-control"> 
 
    <td>First</td> 
 
    <td>Second</td> 
 
    <td>......</td> 
 
    <td>No Alert</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</body> 
 
</html>

出典

2017-06-10 07:30:12

あなたが答えをどのように修正したかの簡単な説明は、かなり認められます。 – amagain

あなたは

を使用することができます

$('#students tr.details-control').click(function(e) { 
    if($(this).context.rowIndex == $('#students tr').length -1){ 
     e.preventDefault(); 
    }else 
     alert('click'); 
});

出典

2017-06-10 07:36:33

下記のコードを確認してください。

$('tbody').on('click', 'tr.details-control td:not(:last-child)', function() { 
    console.log('click'); 
});

出典

2017-06-14 15:14:47

各行の最後の列をクリックしないようにする

答えて

関連する問題