显示：块杀死我的风格

我有一个表中有一个inputbox在我用来过滤表的元素之一。显示：块杀死我的风格

当我在箱子里看到东西时，表格会被过滤。

的奇怪的事情是，如果我使用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(); 
    } 
});

：块

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

来源

2013-05-03 Patrick

添加你的CSS .... – Sowmya 2013-05-03 12:18:20

和的jsfiddle请... – 2013-05-03 12:20:23

使用display:table-row代替，因为表中的行不display:block默认！

来源

2013-05-03 12:29:05 naivists

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

来源

2013-05-03 12:26:02 wellers

感谢您的解释。这很有用 – Patrick 2013-05-03 12:46:10

很难说没有看到CSS，但它可能是因为“display：block;”添加一个边框到输入，切换没有。删除边框或加宽单元格可能会起作用。

来源

2013-05-03 12:28:43 Jon

的元件上设置display:block设置其显示类型为block。

但是你要做到这一点就表元素，它们具有不同的默认显示类型，不与block很好地工作。

如果需要设置这些元素的显示类型，你需要将它们设置为display:table，display:table-row或display:table-cell根据你设置的元素。

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

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

的display属性设置为你的jQuery代码空字符串删除内联样式，因此正常的CSS需要如果您没有为该元素指定任何CSS，则为浏览器默认值。

来源

2013-05-03 12:32:21 Spudley

显示：块杀死我的风格

回答

相关问题