Ich möchte, dass die Tabelle ausgeblendete Zeilen anzeigt, wenn ich sie durchsuche, und sie ausblendet, wenn ich die Ein ⇐ CSS

[Anonymous]

Die Klasse .hidden wird nicht angezeigt, und wenn ich suche, wird sie angezeigt, aber das Problem ist, dass sie nicht verschwindet, wenn ich die Eingabe lösche...
Wie kann das behoben werden, sodass die Klasse .hidden verschwindet, wenn ich mit dem Löschen der Eingabe beginne?
Dies ist mein Quellcode:
HTML:

Code: Select all

Date
Title
Something
Options




12/06/16
Example
Janko Tomas
Video


GBP
Pound

Active


GEL
Georgian Lari


Active


USD
US Dollar

Active


USD
US Dollar

Active

CSS:

Code: Select all

#section{
width: 80%;
margin: auto;
}

.sub-section{
width: 100%;
margin: auto;
position: relative;
}

.table{
width: 100%;
margin: auto;
background-color: white;
}

thead{
background-color: #333;
color: white;
margin: 0;
}

thead tr th{

font-weight: normal;
padding-top: 5px;
padding-bottom: 5px;
}
thead tr{
margin: 0;
padding: 0;
}

.hidden{
display: none;
}

Und schließlich die JQUERY:

Code: Select all

$(document).ready(function () {

(function ($) {

$('#filter').keyup(function () {

var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
$('.hidden').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});