Display jQuery-ui dialog box if <div> is not empty

Question

I have a div block like this:

<div id="myDiv">
<table>
<tbody>
<tr>Some data</tr>
</tbody>
</table>
</div>

All I want to do is check if the <tr></tr> has some text in it and display this div block in a dialog box, otherwise don't do anything.

What would be the best way to do this? I don't know how to check if the <tr></tr> is empty or not.

Answer 1

First of all you have invalid html. The tr tag can contains one or more th or td elements (W3C). So fix your html.

As for validation using jQuery:

if ($('#myDiv table tr td').is(':empty')) {
}
else {
}

http://jsfiddle.net/JnyJs/1/

Answer 2

You can check the "emptiness" usng jQuery's .text() function:

var $tr = $('#myDiv > table > tbody > tr');

if ($tr.text())
{
    // div is not empty
}
else
{
    // div is empty
}

You may want to $.trim() the whitespace from the returned string.

Answer 3

DEMO

var text = $.trim($('#myDiv').text());
if (text) {
    alert(text);
}