jquery - HTML 行单元格为空时如何缩小或隐藏？

Question

我在 html 表格行中有几个链接。在后面的代码中，我根据某些条件隐藏了几个链接。但是页面看起来不太好，并且显示了隐藏控件的空间。

那么当 HTML 行是空单元格时，如何使用 CSS 删除这些空格。

网页上的html代码

Answer 1

工作 jsFiddle 演示

$(function () {
    $('table tr').each(function () {
        var flag = true;
        $(this).find('td').each(function () {
            var l = $(this).html().replace(/\s+/g, '').length;
            if (l) {
                flag = false;
            }
        });

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

Answer 2

首先，为每个将被隐藏的属性设置一个类属性（通过键入class="xxxxx"，其中 xxxxx 是您要用于该类的名称，在您的 html 元素的开始标记中） 。<tr>如果您正在动态执行此操作，请使用 jQuery 或其他东西。确保<tr>将同时隐藏的所有 s 具有相同的类。然后.xxxxx{display:none}在你的 CSS 中使用。如果您使用display:none您的表格行将仍然存在（我假设您想要）但不会占用任何空间。

Answer 3

检查此演示http://jsfiddle.net/yeyene/6SHPP/1/

如果您的单元格没有任何内容或有空格，则此脚本将全部隐藏。

$('table td').each(function () {
    if( $(this).text() == '' || $(this).text() == ' ' )
        $(this).parent('tr').remove();       
});

Answer 4

您可以尝试使用 col 标记在一个位置为所有行设置表格样式，但您需要在表格或表格 css 类上设置表格布局：固定样式并为单元格设置溢出样式

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

这就是你的 CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }