0

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

当我在框中写一些东西时，表格会被过滤。

奇怪的是，如果我使用 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>

过滤有效的脚本

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

如果我使用 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;
}
4

4 回答 4

2

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

于 2013-05-03T12:29:05.713 回答
1

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

于 2013-05-03T12:26:02.117 回答
0

display:block对元素进行设置会将其显示类型设置为block。

但是，您正在尝试对具有不同默认显示类型且不适用于block.

如果您需要设置这些元素的显示类型，您需要将它们设置为display:table，display:table-row或者display:table-cell取决于您正在设置的元素。

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

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

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

于 2013-05-03T12:32:21.183 回答
0

不看 CSS 很难判断，但可能是因为“display:block;” 为输入添加边框，而切换不添加。删除边框或加宽单元格可能会起作用。

于 2013-05-03T12:28:43.510 回答