Hide empty tables with jQuery in Voxco
February 16, 2012 6:35 PM   Subscribe

Somewhat obscure jQuery question.

Relevant HTML: http://pastebin.com/ywwdTSda

I want to hide an empty table using jQuery. Why have the empty table, you ask? Because I am using a program called Voxco to program a Web survey and there just isn't a whole lot I can do to customize it that doesn't involve jQuery.

See, there is a lot of "skip logic" in the survey that in some situations may hide certain questions from view. Rather than hiding the question element entirely, Voxco leaves an empty table so there are strange gaps on the screen. This is bad.

In the included HTML, the first contains a question and the second does not. That's the one I want to hide. I want to banish it entirely so that the table element is evaluated and if it has content, it takes the place of the empty spot.

I think this can be done. I tried doing various things I found on Google by searching "hide table jquery" & "hide td jquery" & "hide empty tables jquery" but none of it really worked. Was thinking that with a specific scenario, maybe someone would have a more specific suggestion...

Thanks.
posted by panoptican to Computers & Internet (7 answers total)
 
Response by poster: I didn't write that very well, I now notice. It's been a while since I've used a MetaFilter comment box. Anyway, there are two TD elements, both with a width of 377. The first has a question (as evidenced by content!) and the second does not. I want to hide the second TD.
posted by panoptican at 6:37 PM on February 16, 2012


Does the td have an id? If so:

$('#Whatever').css('display', 'none');

If not, you will need to do some "child" crawling down the tree, which is a little complex but definitely doable.
posted by drjimmy11 at 6:58 PM on February 16, 2012


Actually I am not 100% sure that would work to fix the layout. Tables are odd. You might have to actually remove the td from the code entirely. Even then it might get a little funky to ask the browser to rearrange the table after it has rendered it...
posted by drjimmy11 at 6:59 PM on February 16, 2012


Best answer: Your code doesn't have a starting or closing table tags, so I'm assuming there's one. Maybe something like this does what you want:

        $(function() {

          $("table").eq(0).find("tr td table").each(function() {
            if ( $(this).find("tr td.LONGLABEL").html() == '' &&
                 $(this).find("tr td.MESSAGE").html() == '' &&
                 $(this).find("tr td.SHORTLABEL").html() == ''            
             ) {
               
               $(this).hide();
               
             }

          })
        });
You may end up wanting to hide the entire td or tr, so you would change

$(this).hide();

to

$(this).parent("td").hide();

but that might cause some issues, depending on what the entire table looks like.
posted by backwards guitar at 7:03 PM on February 16, 2012


​$( function () {
    $('table').each( function () {
        if ( $(this).find('td.SHORTLABEL').text() == '')
        {$(this).hide();}
        }
                     );
}
    );
Obviously replacing the shortlabel whatever td with the one you want to check if it's empty or not.
posted by gramcracker at 7:05 PM on February 16, 2012


Response by poster: All these look good. I am heading home for the day so I won't be able to tinker around until tomorrow. And yes, this is nested deep inside of multiple table tags (the Voxco software loves to put things in tables within tables within tables).
posted by panoptican at 7:17 PM on February 16, 2012


Response by poster: backwards guitar's solution mostly works. I am still tweaking it a bit to make it more effective and I'll post the final script here when done. Thanks so much!
posted by panoptican at 9:07 AM on February 17, 2012


« Older Fantasy newbie wanting more pls!   |   Building a text-heavy site, what resources should... Newer »
This thread is closed to new comments.