5

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

5
  • Do I understand correctly? You want to select all <th> without thoes that have #otherTable? If not, you need to extend it to some if's :/ Nov 4, 2016 at 10:38
  • All <th>s that are not in #otherTable
    – bart2puck
    Nov 4, 2016 at 10:38
  • Totally unrelated question: why would you put a table inside a th?
    – Andrei V
    Nov 4, 2016 at 10:39
  • should be td. was just typing fast and not paying attention.
    – bart2puck
    Nov 4, 2016 at 10:41
  • Could you pay attention and revise the question, with the correct markup?
    – Salman A
    Nov 4, 2016 at 12:09

4 Answers 4

6

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>

1

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')
1

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');
});
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.