我希望表格在搜索时显示隐藏的行,并在删除输入时隐藏它们?

时间:2016-06-14 16:38:53

标签: javascript jquery html css web

它没有显示.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));
});

1 个答案:

答案 0 :(得分:0)

检查这个我觉得这对你有帮助

#include "stdafx.h"
#include <iostream>
#include <math.h>

using namespace std;

int main()
{
int niz[10];
cout << "Unesi 10 brojeva:";
for (int i = 0; i < 10; i++) {
    cin >> niz[i];
}

int suma = 0;
int parni[5];
int j = 0;
for (int i = 0; i < 10; i++) {
    if (niz[i] % 2 == 0) {
        niz[i] == parni[j];
        j++;
        if (j == 5) {
            break;
        }
    }
}
for (int i = 0; i < 5; i++) {
    suma = parni[i] + suma;
}
cout << suma;
system("PAUSE");
return 0;
}
$(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>