Question

I am trying to hide table row if that rows td has no text inside it. How to do that. So far i tried is at fiddle here

Javascript:

$('#tblNodes > tbody  > tr').each(function () {
    if ($td.text() == '') {
        $(this).hide();
    }
});

HTML:

<table id="tblNodes" border=1 width=100%>
    <tr>
        <td class="nodeData"></td>
    </tr>
    <tr>
        <td class="nodeData">abc</td>
    </tr>
    <tr>
        <td class="nodeData"></td>
        <tr>
            <td class="nodeData"></td>
        </tr>
        <tr>
            <td class="nodeData">abc</td>
        </tr>
        <tr>
            <td class="nodeData"></td>
        </tr>
    </tr>
</table>
Was it helpful?

Solution

Try

$('#tblNodes > tbody  > tr').has('td:empty').hide()

or

$('#tblNodes > tbody  > tr td:empty').parent().hide()

OTHER TIPS

You can use .is() along with :empty selector to achieve what you want.

Try,

$('#tblNodes > tbody  > tr').each(function () {
    if ($(this).find('td').is(':empty')) {
        $(this).hide();
    }
});

try this

 $('#tblNodes tr').each(function() {
   $td=$(this).find('td');
    if($td.text() == ''){
      $(this).hide();
    }
 });

Try this

$('#tblNodes > tbody  > tr').each(function() {
    if($(this).find('td').text() == ''){
    $(this).hide();
    }
});

You can try :

1)Check for TD in each TR in table.

2)If it has no text , set its display property to none.

$('#tblNodes tr').each(function() {
   $td=$(this).find('td');
    if($td.text() === ''){
      $(this).css("display", "none");
    }
 });

Try this:

$('#tblNodes tbody  tr').each(function () {
    if ($(this).find('td').is(':empty')) {
        $(this).hide();
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top