CODEWITHSUNDEEP
jquery
Hawke
Hawke

Reputation: 584

JQuery excluding class from

I have a load of tables which have clickable rows as below:

$('.clickable-tbody tr').click(function () {            
                var value = $(this).find('td:first').text().replace(/\s/g, '');

                var url = "/Link?ID=" + value;
                $(location).attr('href', url);
        })

Unfortunately, a couple of the tables have some td's with buttons in, so I need a way to exclude them from the clickable area (ideally with another class), so that the button can can clicked and not fire to listeners. So:

<tbody class="clickable-tbody">
<tr>
<td> //All of these need to have a href listener as in the jquery
</td>
<td class="no-click">
<button></button> //I want the button to fire, and not the href
</td>
<td>
</td>

I can't find a good way to exclude them.

I have looked at:

jQuery Listener Excluding Child

But mine doesn't have an independent class on the other td's (there are too many to want to do this for).

Ideally I want something like: $('.clickable-tbody tr') except $(td .no-click)

I realise the clickable area is currently the whole row, but my attempts to break it down to each td failed (it then couldn't do td:first)

Update (Thanks to the below):

I think I need something like the below, but the location attribute still applies to the table row and so doesn't exclude the cell with the no-click class

$('.clickable-tbody tr').click(function () {            
            var value = $(this).find('td:first').text().replace(/\s/g, '');

        $(this).find('td').each(function () {
            if (!$(this).hasClass('no-click')) {
                var url = "/Link?ID=" + value;
                $(location).attr('href', url);
            }
        })
    })

Upvotes: 1

Views: 278

Answers (3)

Esko
Esko

Reputation: 4207

You can simply exlude the rows with :not

$('.clickable-tbody td:not(.no-click)').click(function() {
  var $firstCellOfRow = $(this).closest("tr").find("td:first");
  console.log("Click fired: " + $firstCellOfRow.text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="clickable-tbody">
    <tr>
      <td>
        Cell 1
      </td>
      <td class="no-click">
        <button>Cell 2</button>
      </td>
      <td>
        Cell 3
      </td>
  </tbody>
</table>

Upvotes: 1

Deepak A
Deepak A

Reputation: 1636

use hasClass() to find the if td has no-click

$('.clickable-tbody td').click(function(e){ 
if(!$(this).hasClass('no-click'))
console.log('clicked')   
})
.no-click
{
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tbody class="clickable-tbody">
<tr>
<td>
<button>Click</button>
</td>
<td class="no-click">
<button>Click</button>
</td>
<td>
<button>Click</button>
</td>
<td class="no-click">
<button>Click</button>
</td>
 
</tr>
<table>

Upvotes: 0

Parth Raval
Parth Raval

Reputation: 4423

$('.clickable-tbody tr').each(function () {
  $(this).find('td').each(function () {
    if ($(this).hasClass('no-click')) {
      $(this).find('button').attr('disabled', true)
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tbody class="clickable-tbody">
  <tr>
    <td>
      <button>Click</button>
    </td>
    <td class="no-click">
      <button>Click</button>
    </td>
    <td>
      <button>Click</button>
    </td>
    <td class="no-click">
      <button>Click</button>
    </td>
  </tr>
  <table>

Upvotes: 0

Related Questions