CODEWITHSUNDEEP
jqueryhtmlhtml-tablehide
MorkPork
MorkPork

Reputation: 884

Hide not working when table is present

I've got a website which has a table with lots of data in it, in the head of the page I have the following code: -

$(function() {
$("td[colspan=3]").find("P").hide();
});

And when my main table has a <P> test </P> in there it correctly hides this (I have a button which then shows this and I know that works).

However, if I enter a sub table into that table between the P's like so

<td colspan="3">
    <P>
        <table>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td></tr>
        </table>
    </P>
</td>

The table is not hidden... What am I missing? I also tried 

$("td[colspan=3]").find("P").find("table").hide();

But no dice here either...

Upvotes: 1

Views: 546

Answers (1)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

This is cause because you have an invalide HTML.

The <p> tag cannot contain an other block inside, it is a text tag with the properties of a block. Once the broswer run hover a block tag inside the <p>, it close automaticly the <p> and opan the new tag.

If you inspect the dom here : http://jsfiddle.net/pqJTZ/, you'll see the <p> is empty.

The solution is to use a <div> instead.

This answer give you good links and a proper explanation.

Upvotes: 4

Related Questions