我有一个表格，其中一个元素中有一个输入框，我用它来过滤表格。
当我在框中添加内容时，表格会被过滤。
奇怪的是，如果我使用 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;
}
最佳答案
改用display:table-row，因为默认情况下表格行不是display:block!
关于jquery - 显示 :block kills my style，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16358755/