title: Use Jquery to find the parent table, of a table, of a td
body: <p>I am customising Sage CRM, so I have no control over the HTML that is written and can't add IDs or class's to the table layouts the CRM spits out. I want to hide a higher (not top) level table based on a users selection of a select dropdown. I can only get a jQuery selector hooked onto the title row of a table within the table I want to hide. </p>
  
  <p>The DOM goes something like:</p>
  
  <pre><code>//Lots of other table structures above this in the DOM....
  &lt;table&gt;  &lt;---- this is the table I want to show or hide based on the users selection
    &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td&gt;
         &lt;table&gt;
           &lt;tbody&gt;
             &lt;tr&gt;
               &lt;td class="PANEREPEAT"&gt;  &lt;---- this is the node I can get selector to
                   Valuation information
  ////
  </code></pre>
  
  <p>So I do the below client side javascript: </p>
  
  <pre><code>    var val_information_screen;
  
      $('.PANEREPEAT').filter(function () {
          //Find the valuation information screen
          return $(this).text() == 'Valuation information';
      }).each(function () { //iterate through all of these (there should only be one!)
          val_information_screen = $(this);
      });
  
      var sel_ofee_type = $('#ofee_type');
      if (sel_ofee_type.val() == '006') {
          val_information_screen.closest('table').parents("table:first").show();
      } else {
          val_information_screen.closest('table').parents("table:first").hide();
      }
  </code></pre>
  
  <p>It does work, it just is not particularly beautiful. The bit that I really detest is below. Is there a better way to traverse up the DOM using jQuery?</p>
  
  <pre><code>val_information_screen.closest('table').parents("table:first").show();
  val_information_screen.closest('table').parents("table:first").hide();
  </code></pre>