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.

The DOM goes something like:

//Lots of other table structures above this in the DOM....
<table>  <---- this is the table I want to show or hide based on the users selection
  <tbody>
    <tr>
     <td>
       <table>
         <tbody>
           <tr>
             <td class="PANEREPEAT">  <---- this is the node I can get selector to
                 Valuation information
////

So I do the below client side javascript:

    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();
    }

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?

val_information_screen.closest('table').parents("table:first").show();
val_information_screen.closest('table').parents("table:first").hide();

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.

The DOM goes something like:

//Lots of other table structures above this in the DOM....
<table>  <---- this is the table I want to show or hide based on the users selection
  <tbody>
    <tr>
     <td>
       <table>
         <tbody>
           <tr>
             <td class="PANEREPEAT">  <---- this is the node I can get selector to
                 Valuation information
////

So I do the below client side javascript:

    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();
    }

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?

val_information_screen.closest('table').parents("table:first").show();
val_information_screen.closest('table').parents("table:first").hide();

• javascript
• jquery
• crm
• sage-crm

Share Improve this question Follow edited Jul 24, 2015 at 22:13 user3717023 asked Aug 6, 2013 at 16:28 MagicalArmchairMagicalArmchair 91111 gold badge1212 silver badges2626 bronze badges 4

• .closest() and .parents() (and .parent()) are how you traverse up the DOM. You could use .closest("table").closest("table") or .parents("table").eq(1) – Ian Commented Aug 6, 2013 at 16:30
• @Ian you're right, basically, but note that .closest() will include the starting node itself as a match. That is, the closest <table> from a <table> will be that table itself, so there'd have to be an intervening .parent() call. (I think.) – Pointy Commented Aug 6, 2013 at 16:33
• @Pointy Oh snap! Good point. Yeah you're right. I usually do remember .closest() starts looking at the current element, but didn't even think of that for chained .closest() calls with the same selector! – Ian Commented Aug 6, 2013 at 16:35
• @Pointy I just wish .parents() had a way to stop, instead of traversing the whole way up the tree. Do you know if .parents("table:eq(1)") would stop traversing? Or if it's basically the same as .parents("table").eq(1)? I'm not sure how to test that – Ian Commented Aug 6, 2013 at 16:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If you are sure that it has fixed structure, then you can use this,

$(td-selector).parents("table").eq(1).hide();

In your case,

val_information_screen.parents("table").eq(1).hide();

If your DOM (specifically starting from table you want to hide till the td you have as selector) is pretty much fixed, then the below selector can be used.

$('#element').parents('table').eq(1)