Rows not being remove or hidden with jQuery script

Question

I am new to jQuery. I tried the below 2 scripts but they didn't work. I verified that att1_preview_lbl.Text is empty and same for att1_preview, but the row did not hide or got removed. Can someone please help?

JavaScript:

<script>
    $('.EventDetail tr').filter(function() {
        return $(this).find('td').filter(function() {
            return !$.trim($(this).text());
        }).length;
    }).hide();
</script>
<script>
    $("table tr").each(function() {
        var cell = $.trim($(this).find('td').text());
        if (cell.length == 0) {
            console.log('empty');
            $(this).addClass('nodisplay');
        }
    });
</script> 

HTML:

<table cellspacing="0" cellpadding="0" width="100%" border="0" style="border-style: groove">
    <tbody>
        <tr>
            <td class="PaddedRight" style="border-style: groove">
                <asp:Label ID="att1_preview_lbl" runat="server">Attribute 1</asp:Label>
            </td>
            <td style="border-style: groove">
                <asp:Label ID="att1_preview" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="PaddedRight" style="border-style: groove">
                <asp:Label ID="att2_preview_lbl" runat="server">Attribute 2</asp:Label>
            </td>
            <td style="border-style: groove">
                <asp:Label ID="att2_preview" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="PaddedRight" style="border-style: groove">
                <asp:Label ID="att3_preview_lbl" runat="server">Attribute 3</asp:Label>
            </td>
            <td style="border-style: groove">
                <asp:Label ID="att3_preview" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
    </tbody>
</table>

Answer 1

OK--I got it after a couple of false starts. Iterate through the cells of each row, and set hasData to true if any of the cells in that row have data. When the cell iteration is complete, hide the row if hasData is still false.

//loop through the rows
$("table tr").each(function (i, row) {
    //reset hasData to false for each row
    var hasData = false;

    //loop through the cells of each row
    $(row).children().each(function (i, cell) {
        //If a cell has data, set hasData to true
        if ($(cell).text().trim().length != 0) {
            hasData = true;
        }
    });

    //Hide the row if hasData is still false after iterating through the cells
    if (hasData == false) {
        $(this).hide();
    }
});

Answer 2

It seems there may be a problem with your second script tag. Your original function iterates the tr elements and attempts to set the class="nodisplay" on the row element based off the first cell's value only... did you mean to set this class on the individual cell like this?

EDIT: I added the jQuery Empty Selector

<script>
    $("table tr").each(function () {
        var cells = $(this).find('td:empty');
        if (cells.length > 0) {
            console.log('empty');
            $(this).addClass('nodisplay');
        }
    });
</script>