Why this jquery $(this).is(":empty") works on IE and doesn't on Chrome?

//Add Row with No data recorded message, when the table is emp开发者_如何学JAVAty/////////////////////////////////////////////

    $("tbody").each(function () {
        NoOfColumns = $(this).prev("thead").find("th").length;

        if ($(this).is(":empty")) {
            $(this).append("<tr><td  class='trTopItem' style='border-top:1px solid silver;background-color:#eeeaf3;'  colspan=" + NoOfColumns + ">No Data Recorded</td></tr>");
        }
    });

Any help would be apreciated, thanks.

I suspect it is to do with what the browsers consider to be empty elements. If you look at the example I've cretaed with jsfiddle you'll notice that the first two tables differ only on the fact that one of teh tbody elements has whitespace and the other doesn't.

http://jsfiddle.net/qtjdp/1/

On IE this renders the no data message in both and on firefox only on the one with no whitespace in the tag.

You'll see I have put in an alternative if statement that is currently commented out. If you use this it works on firefox (and Psytronic tells me in comments Chrome too though I don't have that installed):

if ($(this).children().length==0)

The reason is that this is checking for child elements (which is what you want here), not just content of any kind.