All geek questions in one place

Disable click on the last column in each row

I am using a boot table. currently, when you click on columns, you get a warning. I want when you click on the last column nothing will happen. Thank your help.

$('#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>
Run codeHide result
+4
source share
6 answers

Must be used :not()with selectors :last-childas shown below: -

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

Working example: -

$('#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>
Run codeHide result
+1
source

Add this:

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

td :

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

, .

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

$(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>
Hide result
0

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

Source: https://habr.com/ru/post/1678928/

More articles:


All Articles