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

Question

我正在使用 Bootstrap 表。当前，当您单击列时，您会收到警报。我想要的是，当您单击最后一列时，什么也不会发生。感谢您的帮助。

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

Answer 1

需要将 :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>