Crkva Kovacica Crkva Kovacica - 5 months ago 18
jQuery Question

I want the table to display hidden rows when I search them and hidde them when i delete the input?

It doesn't show .hidden class and when i search it shows it, but the problem is that it doesn't disappear when i delete the input…

How can this be fixed so the .hidden class disappears when i start deleting the input?

This is my source code:
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;
}


And finally the 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));

});


Please help as soon as possible...

Answer

Check this i think this help to you

$(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>

Comments