Question

我有一个表格，其中一个元素中的输入框用于过滤表格。

当我怀疑盒子里的东西时，表格会被过滤掉。

奇怪的是，如果我使用display：block来显示我想要看到的行，它会完全破坏行的外观。但是如果我使用jquery .toggle（）;它工作正常。

为什么？

HTML：

<body>
    <table>
        <tr><th>Users<input type="text" id="filter"/></th></tr>
        <tr class="user" data="patrick"><td>Patrick</td></tr>
        <tr class="user" data="john"><td>John</td></tr>
    </table>
</body>

过滤可行的SCRIPT

$('#filter').keyup(function(){
    $(".user").css("display", "none");
    if($("#filter").val()!=''){             
        var filterstr = $("#filter").val().toLowerCase();
        $("[data*="+filterstr+"].user").toggle();
    }else{
        $(".user").toggle();
    }
});

如果我使用display：block

With display:block

CSS：

table
{
   width: 200px;
}
td
{
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}
th
{
   background: #f3f3f3;
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}

Answer 1

请改用display:table-row，因为默认情况下表行不是display:block！

Answer 2

这是因为表格的默认显示类型不是display: block，而是display: table。每个表体，行，单元格等也有自己的显示类型。我认为JQuery的toggle()方法根据您要切换的元素设置正确的显示类型。

Answer 3

没有看到CSS就很难说，但可能是因为“display：block;”为输入添加边框，而切换不添加。删除边框或加宽单元格可能会有效。

Answer 4

在元素上设置display:block会将其显示类型设置为block。

但是，您尝试对表格元素执行此操作，这些表格元素具有不同的默认显示类型，并且与block无法正常工作。

如果您需要设置这些元素的显示类型，则需要将其设置为display:table，display:table-row或display:table-cell，具体取决于您要设置的元素。

或者，您可以将其设置回默认值，如下所示：

$('myTableCell').css('display':'');

在jQuery代码中将display属性设置为空字符串会删除内联样式，因此正常的CSS会接管，或者如果您没有为元素指定任何CSS，则会删除浏览器默认值。

显示：块杀死了我的风格

4 个答案: