Question

我正在使用bootstrap表。目前，当您点击列时，您会收到提醒。我想要的是当你点击最后一列时什么都不会发生。非常感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

添加：

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

Answer 2

您可以将事件添加到td元素中：

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

Answer 3

需要将:not()与:last-child选择器一起使用，如下所示： -

$('#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>

Answer 4

请检查以下代码。

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

Answer 5

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

Answer 6

您可以使用

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

禁用单击每行中的最后一列

6 个答案: