顯示：塊殺死我的風格

我有一個表中有一個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

顯示：塊殺死我的風格

回答

相關問題