Can't hide HTML table

Question

I'm having an oddly difficult hiding an html table with javascript/jQuery. I've tried both of the following:

document.getElementById('tblQuickTools').style.display = 'none';
$('#tblQuickTools').hide();

I've stepped through the code to make sure the lines are being hit. The HTML for the table is below.

<table cellpadding="0" cellspacing="0" width="38%" id="tblQuickTools">
    <tr>
        <td class="outerTableTopLeftSmall">
        </td>
        <td colspan="4" class="outerTableTopRepeatSmall">
        </td>
        <td class="outerTableTopRightSmall">
        </td>
        <td class="outerTableTopLeftSmall">
        </td>
        <td colspan="2" class="outerTableTopRepeatSmall">
        </td>
        <td class="outerTableTopRightSmall">
        </td>
    </tr>
    <tr>
        <td class="outerTableLeftRepeatSmall">
        </td>
        <td colspan="4">
            <img src="identity.gif" border="0" />
            <strong><big>Quick Tools</big> </strong>
        </td>
        <td class="outerTableRightRepeatSmall">
        </td>
    </tr>
    <tr>
        <td class="outerTableLeftRepeatSmall">
        </td>
        <td colspan="4">
            <strong>
                <hr />
            </strong>
        </td>
        <td class="outerTableRightRepeatSmall">
        </td>
    </tr>
    <tr>
        <td class="outerTableLeftRepeatSmall">
        </td>
        <td>
            <a id="btnDownloadAll" onclick="LaunchSignOffMultiDownloader(this);this.blur();return false;"
                href="javascript:void(0);" class="btnMed"><span>Download All</span> </a>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <a id="btnReplaceAll" onclick="LaunchSignOffMultiUploader(this, true);this.blur();return false;"
                href="javascript:void(0);" class="btnMed"><span>Replace All</span> </a>
        </td>
        <td>
            <a id="btnRetainAll" onclick="RetainAllSignOffDocuments();this.blur();return false;"
                href="javascript:void(0);" class="btnMed"><span>Retain All</span> </a>
        </td>
        <td class="outerTableRightRepeatSmall">
        </td>
    </tr>
    <tr>
        <td class="outerTableBotLeftSmall">
        </td>
        <td colspan="4" class="outerTableBotRepeatSmall">
        </td>
        <td class="outerTableBotRightSmall">
        </td>
    </tr>
</table>

I checked and tblQuickTools is loaded. So it's not a loading issue. I could try using $(document).ready() but I'm apprehensive about it. tblQuickTools is inside a tab which is inside an aspx page which sits in a Master Page. The tab is loaded through AJAX when clicked on. The hide code runs in the tabLoaded() function. If I used $(document).ready() I'm not sure which document ready it would fire on, the tab, the page or the master page.

Works fine here http://jsfiddle.net/5t9q9/ are you getting any errors in the console? — Anton, Jun 10 '13 at 14:39
How are you trying to hide it? Show how you try to trigger that code. — epascarello, Jun 10 '13 at 14:40
don't forget , you cannot hide something that is not actually exist. — Ivan Chernykh, Jun 10 '13 at 14:41
Your code will work if you put it at the end of your HTML body. — iurisilvio, Jun 10 '13 at 14:42
@David You're talking about 2 different things. The link you posted refers to putting a ` — Ian, Jun 10 '13 at 15:00
better of adding a class to the html element and hide it that way .myspecialclass #tblQuickTools {display:none} you can add the class via js or jquery — James Daly, Jun 10 '13 at 15:00
@JamesDaly It might be better to add the class to the `` tag - I know IE has had problems in the past with normal attributes on the `` element. Not a big deal, I've just stayed away from that — Ian, Jun 10 '13 at 15:01
@Ian - I believe Modernizer adds it to the html element - that's why you need to put modernizer within the head; but body or head I believe it's all semantics — James Daly, Jun 10 '13 at 15:05
OK. I checked and tblQuickTools is loaded. So it's not a loading issue. I could try using $(document).ready() but I'm apprehensive about it. tblQuickTools is inside a tab which is inside an aspx page which sits in a Master Page. The tab is loaded through AJAX when clicked on. The hide code runs in the tabLoaded() function. If I used $(document).ready() I'm not sure which document ready it would fire on, the tab, the page or the master page. — Legion, Jun 10 '13 at 15:06
@JamesDaly Yeah, ignore what I said. I used to add a class to the `` element, and I thought I read somewhere about it having problems in IE. But I also often see conditional comments used to add classes to the `` element (obviously **for IE**). So maybe I'm thinking of something else (like specifically using `document.documentElement` to manipulate the class) which may be a "problem" in IE, but I can't see why. I know a lot of things work on the `` so that obviously seems fine — Ian, Jun 10 '13 at 15:09
if it's a dynamic element you'll need to use event delegation $("body").on("click", "#yourtab", function(){ $('#tblQuickTools').hide() }) — James Daly, Jun 10 '13 at 15:14

score 9 · Answer 1 · answered Jun 10 '13 at 14:44

If you are trying to hide this table just after page is displayed, it might not be there yet. If this is the case, try the following:

$(document).ready(function(){
    $('#tblQuickTools').hide();
});

It will launch $('#tblQuickTools').hide(); after the page is completely rendered.

score 1 · Answer 2 · answered Jun 10 '13 at 15:09

You can hide it with JavaScript (after the document loads, as pointed out), but you'd really be better off styling it hidden:

<head>
<style>

  #tblQuickTools { display:none }

</style>
</head>

This will eliminate any flickering that may occur with the JS version.

Can't hide HTML table

2 Answers2