How to exclude the first td when selecting a tr? CSS, JQuery

Question

I have this script that changes background-color for a table's tr when clicked:

<script>
  $('#reviews').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
  })
</script>

It works fine. However, I'd like to exclude the first td of the tr . So, when the user clicks on the first td nothing happens. How to exclude it?

Tried this:

<script>
  $('#reviews').on('click', 'tbody tr:not(:first-of-type)', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
  })
</script>

But it still highlight the entire row when clicking on the first td .

Answer 1

You're trying to exclude first tr, but mentioned you wanted first td excluded.

try like this

$('#reviews').on('click', 'tbody > tr', function(event) {
    $(this).parent().find('td:not(:first-of-type)').addClass('highlight');
    $('table#reviews tr > td:not(:first-of-type).highlight').removeClass('highlight');
})

Answer 2

You exclude the first tr not td of each line. If I understand your goals correctly, it should looks something like this:

  $('#reviews').on('click', 'tbody tr td:not( :first-of-type )', function(event) {
    $(this).parent().addClass('highlight').siblings().removeClass('highlight');
  })

Demo link