JQuery: select all cells in a 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 when Goodbye is clicked. Adding a class to Hello cells is possible, 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 tried:

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

and they do not work.

attached a violin.

Fiddle

Answer 1

Ok, got it, I think you're looking for something like this

https://jsfiddle.net/smqdx20x/

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

Answer 2

Perhaps this is what you need. See Demo below.

Two options are available.

Since you are checking the text content of <th> for a specific action, you can use jQuery .text() to get the content of <th> .

More on jQuery.text ()

You will also need JavaScript this to refer to the current <th> click.

Read more about this keyword in MDN

Option 1

This parameter continues to add the .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 parameter removes the .unfocused class from all <th> before adding the .unfocused class to the current <th> click.

 $(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 3

You provide background to parents. Therefore, 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'); }); 

Answer 4

You can use the :contains selector:

 $(function() { $('#myTable th:contains(Hello)').click(function() { $('#myTable').addClass('unfocused'); }); }); 

 .unfocused { background-color: blue; } 

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