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

I am attempting to iterate through a HTML table using jQuery and delete empty rows. The page is driven by ASP.NET and with certain permission, items in the table will be hidden. Therefore, I wanted to create this script to remove the empty rows and get rid of the space between the other items that are still displayed. I cannot seem to get what I currently have to run and I am unsure as to why. Here is the code:

我尝试使用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>

Any guidance would be greatly appreciated. Thanks!

如有任何指导将不胜感激。谢谢!

4 个解决方案

#1

Your code appears to work just fine. Try running the following on its own to see what I mean:

您的代码似乎工作得很好。试着自己运行以下代码，看看我是什么意思:

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

Could there be something else on the page that might be conflicting?

这一页上还有什么可能是相互矛盾的吗?

#2

Lead to problem in case We have Only TD empty and all other TD is Filled

如果我们只有TD是空的并且所有其他的TD都被填满了，就会导致问题

I'm change the Code to make this in its consideration

我正在修改代码，使其考虑到这一点

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

#3

Try this:

试试这个:

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

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

That said, you really want to do this on the server side. It'll look ugly on the client side because you'll have the empty rows messing things up until the document ready event is fired.

也就是说，您确实希望在服务器端执行此操作。在客户端看起来很难看，因为空行会把事情搞砸，直到文档就绪事件被触发。

#4

I think it is better to use the '.parent()' method, because a 'tr' tag is always the next parent from a 'td' tag.

我认为最好使用'.parent()'方法，因为'tr'标记总是'td'标记的下一个父标记。

#1