Question

我是jQuery的新手。我尝试了以下2个脚本，但它们没有用。我确认att1_preview_lbl.Text为att1_preview为空且相同，但该行未隐藏或已删除。有人可以帮忙吗？

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

好的 - 我在几次错误的开始后得到了它。遍历每一行的单元格，如果该行中的任何单元格都有数据，则将hasData设置为true。当单元格迭代完成时，如果hasData仍然为假，则隐藏该行。

//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

似乎可能第二个脚本标记存在问题。您的原始函数会迭代tr元素，并尝试仅根据第一个单元格的值设置class="nodisplay"元素上的row ...您是否要在单个{上设置此类{1}}喜欢这个？

编辑：我添加了jQuery Empty Selector

cell

不使用jQuery脚本删除或隐藏行

2 个答案: