Question

我正在尝试使用jQuery迭代HTML表并删除空行。该页面由ASP.NET驱动，并且在某些权限下，表中的项目将被隐藏。因此，我想创建此脚本以删除空行并删除仍显示的其他项之间的空间。我似乎无法得到我目前要运行的东西，我不确定为什么。这是代码：

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('tr').each(function () {
            $(this).find('td').each(function () {
                if ($(this).text().trim() == "") {
                    $(this).closest("tr").remove();
                };
            });
        });
    });
</script>

非常感谢任何指导。谢谢！

Answer 1

您的代码似乎运行正常。尝试单独运行以下内容以查看我的意思：

<html>
<head>
    <title>jQuery Tests</title>

    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('tr').each(function () {
                $(this).find('td').each(function () {
                    if ($(this).text().trim() == "") {
                        $(this).closest("tr").remove();
                    };
                });
            });
        });
    </script>

</head>
<body>
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td></td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>   </td>
        </tr>
    </table>
</body>

页面上是否还有其他可能存在冲突的内容？

Answer 2

导致问题我们只有TD空，所有其他TD都填充

我正在更改代码以便考虑

<script type="text/javascript">
        $(document).ready(function () {

            $('tr').each(function () {
                var totalTDs = $(this).find('td').length;
                var emptyTDS = 0;

                $(this).find('td').each(function () {
                    if ($(this).text().trim() == "") {
                        emptyTDS += 1;
                    };
                });

                if (emptyTDS == totalTDs) {
                    $(this).remove();
                }
            });
        });
    </script>

Answer 3

试试这个：

var td = $(this).find('td:empty');
if ( td.length > 0 ) $(this).remove();

http://api.jquery.com/empty-selector/

那就是说，你真的想在服务器端这样做。它在客户端看起来很难看，因为在文档就绪事件被触发之前，你会让空行搞乱。

Answer 4

我认为最好使用'.parent（）'方法，因为'tr'标记始终是'td'标记中的下一个父标记。

Answer 5

接受的答案也会删除非空行。此代码仅在所有行列都为空时删除该行。

// remove empty rows
$('.tr').each(function () {
    let remove = true;
    $(this).find('td').each(function () {
        if ($(this).text().trim() !== "") {
            remove = false;
            return false;
        };
    });

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

使用jQuery迭代并删除空的HTML表行

5 个答案: