Question

I have this code:

$("#widgetstable tr td:nth-child("+column+")").hide();

But it selects any td’s that happen to be nested inside the selected td’s. (And there are a couple.)

I tried $("#widgetstable > tr > td:nth-child("+column+")").hide(); but it didn’t select ANYTHING.

Answer 1

A tbody is inserted silently when your browser parses your HTML, and the > selector means the direct child of the parent. For the following HTML this selector would work:

<style>
   td {
     background-color: blue;
   }
</style>
<table id='widgetstable'>
  <tr>
    <td>Me</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr><td>Not Me</td></tr>
      </table>
    </td>
  </tr>
</table>
<script>
  $("#widgetstable > tbody > tr > td").css('background-color', 'red');
</script>

Here is a demo