javascript - 我希望表格在搜索时显示隐藏行并在删除输入时隐藏它们？

Question

它不显示 .hidden 类，当我搜索时它会显示它，但问题是当我删除输入时它不会消失......

如何解决这个问题，以便当我开始删除输入时 .hidden 类消失？

这是我的源代码:HTML:

<input id="filter" type="text" class="form-control" placeholder="Datumu, Naslovu, Propovedniku">

<table class="table table-striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Something</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>12/06/16</td>
            <td>Example</td>
            <td>Janko Tomas</td>
            <td>Video</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr class="hidden">
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

CSS:

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

最后是 JQUERY:

$(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));
});

Answer 1

检查一下，我认为这对您有帮助

$(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();
			if($(this).val()!=""){
            $('.hidden').filter(function () {
                return rex.test($(this).text());
            }).show();
			}
			else{
				$('.hidden').hide();
				}



        })





    }(jQuery));

});

 <style>
  #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;
}
  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" class="form-control" placeholder="Datumu, Naslovu, Propovedniku">

<table class="table table-striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Something</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>12/06/16</td>
            <td>Example</td>
            <td>Janko Tomas</td>
            <td>Video</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr class="hidden">
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>