Removing Complete TR using when no data

Question

Hi,

I have below code in my vb.net application!

<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;" id="ctl00_ContentPlaceHolder2_FormView1" class="innerGridTable">
    <tbody>
        <tr>
                <td colspan="2">
        <tr>
                <td>
                        <b>VenueID:</b>
                </td>
                <td>
                        <span id="ctl00_ContentPlaceHolder2_FormView1_VenueIDLabel">3</span>
                </td>
        </tr>



<tr>
                            <td colspan="4">
                                <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                                    Text="Update" CssClass="Button" />
                                &nbsp;<asp:Button ID="ibtnNewTrainer" runat="server" CausesValidation="False" CommandName="New"
                                    CssClass="Button" Text="New Trainer" />
                                &nbsp;<asp:Button ID="ibtnSearchCourse" runat="server" CausesValidation="False" CommandName="Search"
                                    CssClass="Button" Text="Search Course" />
                            </td>
                            </tr>
</td>
            </tr>
    </tbody>
</table>

If you see first TR it is blank having just <td colspan="2"></td> without any data. Now I want to delete complete TR using Jquery when there is no data in TD like above condition.

Thanks.

Best Regards, MS

Answer 1

I'd loop through all the data elements and set a flag if one of them has data. If you don't find data then remove the row.

$('tr').each( function() {
    var hasData = false;
    $(this).find('td').each( function() {
        if ($(this).text()) { // this is the TD here
           hasData = true;
           return false;
        }
    });
    if (!hasData) $(this).remove(); // this is the TR here
});

Note that you could check the combined text of all the TDs at once, but this will short circuit on the first one that has any data. That may not be much of an improvement. The other way would be:

if ($(this).find('td').text()) {
    $(this).remove();
}

Note also that this doesn't account for whitespace. They need to be truly empty -- no line breaks, etc. If they can contain line breaks, then you'll need to check with a regular expression that only allows whitespace.

Answer 2

You could check that the .text() of the TR contains only whitespace, and delete it if it does.

$("tr").each(function() {
   // test using regexp that the content of the tr contains only whitespace
   if (/^\s*$/.test($(this).text())) {
     // remove tr if it is "blank"
     $(this).remove();
   }
}

Form elements don't have text representation though, you could also test for any "empty" tags:

$("tr").each(function() {
   // filter our children to only not empty tags.
   // 0 of them means that all our children are empty
   if ($(this).children().filter(':not(:empty)').length == 0) {
     $(this).remove();
   }
}

Answer 3

$("table tr").each(function() {
   if ($("td:empty",this).length == $("td",this).length) {
       $(this).remove();
   }
});

Answer 4

Hello Guys,

I resolved my problem using below jquery code

$(document).ready(function() 
    { 
        $("table tr:first td[colspan=2]").each(function() {

           if (/^\s*$/.test($(this).text())) 
           {

             $(this).remove();
           }
        });
 });

Cheers! Please let me know what can be the problem if I use above code