CODEWITHSUNDEEP
javascriptjquery
Legion
Legion

Reputation: 3427

Can't hide HTML table

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.

Upvotes: 0

Views: 682

Answers (2)

ic3b3rg
ic3b3rg

Reputation: 14927

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.

Upvotes: 1

ElmoVanKielmo
ElmoVanKielmo

Reputation: 11290

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.

Upvotes: 9

Related Questions