дисплей: блок убивает мой стиль

У меня есть таблица, в которой есть входной ящик в одном из элементов, который я использую для фильтрации таблицы.дисплей: блок убивает мой стиль

Когда я что-то нахожу в коробке, таблица фильтруется.

Жесткая вещь в том, что если я использую 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(); 
    } 
});

Если я использую дисплей: блок

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

и jsfiddle пожалуйста ... –

Вместо этого используйте display:table-row, потому что строки таблицы не являются display:block по умолчанию!

источник

2013-05-03 12:29:05 naivists

Это связано с тем, что тип отображения по умолчанию для таблицы не display: block, а display: table. У каждого тела таблицы, строки, ячейки и т. Д. Также есть свой тип отображения. Я думаю, что метод toggle() JQuery устанавливает правильный тип отображения в зависимости от того, какой элемент вы переключаете.

источник

2013-05-03 12:26:02 wellers

Спасибо за объяснение. Это было полезно – Patrick

Трудно сказать, не видя 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

дисплей: блок убивает мой стиль

ответ

Смежные вопросы