Jquery selector all cells in table except

Question

I am trying to find the correct selector to be able to change the background to blue if any Hello cell is clicked, but not if Goodbye is clicked. Adding a class to the Hello cells is a possible option, but not preferred.

$(function() {
  $('#myTable td').click(function() {
    $('#myTable').addClass('unfocused');
  });
});

.unfocused {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>

  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>

  <tr>
    <td>
      <table id='otherTable'>
        <tr>
          <td>Something</td>
        </tr>
      </table>
    </td>
  </tr>

I have tried:

 $('#myTable td').not('#otherTable td').click(....
 $('#myTable td').not('#otherTable').click(....

and those dont work.

attached a fiddle.

Fiddle

Answer 1

Maybe this is what you need. See demo below

Two options are available.

Since you're checking the text content of <th> to perform a specific action, then you can use jQuery .text() to get the content of the <th>.

Read more about jQuery .text()

You'll also need JavaScript this to refer to the currently clicked <th>.

Read more about this keyword at MDN

Option 1

This option keeps adding .unfocused class to all <th> when clicked.

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

Option 2

This option removes .unfocused class from all <th> before adding .unfocused class to the currently clicked <th>.

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $('th').removeClass('unfocused');
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

Answer 2

Ok, got it, I think you are loooking for something like this

https://jsfiddle.net/smqdx20x/

$('#myTable th').not($('th > table#otherTable').parent()).not('table#otherTable th')

Answer 3

You are giving background to parent. So this solution may be useful to you.

First Way

$('#myTable th').click(function() {
    $('#myTable').addClass('unfocused');
    $('#otherTable').addClass('white');
});

Second Way

$('#myTable th').click(function() {
    $(this).parent().addClass('unfocused');
    $(this).parent().siblings().not(".check").addClass('unfocused');
});