jquery Magic: access HTML elements without a class or id

I ran into a problem today and jquery came to the rescue once again.  Where I work, we have a – shall Isay, HTML primitive CMS.  The value of this product is in the ERP system – not the savvy table based layouts is spews out.

Anyway – it was displaying a very ugly HTML table based page navigation, which looked like horse snot.  But – the worst part is I couldn’t access the table (or cells for that matter) because it had no class or id associated with it.  When I tried to “cascade” to it – it of course has the same footprint of the content table of the page…so no dice.

What I ended up figuring out – is jquery lets me use multiple HTML attributes to fix this issue.  I noticed – this particular table has a cellpadding of 5 and a cellspacing of 3.  The only tables which had this exact footprint were my offening nav tables.  I knew you could access elements via jquery (and CSS) via one attribute…but I didn’t know you could do it with more than one.

Walla – the solution:

    <script>
      $(function(){
        $('table[cellpadding=5][cellspacing=3]').css({display: 'none'});
      });
    </script>

It worked great.  Hopefully it will get you out of a bind too.