过滤文本输入JavaScript

时间:2013-09-26 04:52:05

标签: javascript php codeigniter

我正在寻找过滤文本输入组合框正在工作,但文本框正在使用年龄。我想要的是过滤名称,但我没有想法。

组合框用于年龄,文本字段用于名称。

HTML

    所有年龄     16     18     20

<input />
 <table class="AvailableGroupLab availGrpLabs avalLabs">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
     </thead>
<tbody>

    <tr>
        <td><span>wewe</span>

        </td>
        <td>16</td>
    </tr>
    <tr>
        <td><span>Melvin</span>

        </td>
        <td>18</td>
    </tr>
    <tr>
        <td><span>Marvin</span>

        </td>
        <td>20</td>
    </tr>

        <tr>
        <td><span>wewex</span>

        </td>
        <td>20</td>
    </tr>
     </tbody>
</table>

的jQuery

function filter(element) {

         var $trs = $('.AvailableGroupLab tbody tr').hide();
        var regexp = new RegExp($(element).val(), 'i');  
        var $valid = $trs.filter(function () {
            return regexp.test($(this).find('td:last-child').text())
        }).show();
        $trs.not($valid).hide()

}

$('input, select').on('keyup change', function () {   
    if($(this).val() !== ""){
       filter(this);  
     } else{
        $('.AvailableGroupLab tbody tr').show();
    }

})

Fiddle Link

1 个答案:

答案 0 :(得分:1)

我对你的代码做了一些修改。试试这个:

function filter(element) {

         var $trs = $('.AvailableGroupLab tbody tr').hide();
        var regexp = new RegExp($(element).val(), 'i');  
        var $valid = $trs.filter(function () {
            return isNaN($(element).val())?regexp.test($(this).find('td:first-child span').text()):regexp.test($(this).find('td:last-child').text());
        }).show();
        $trs.not($valid).hide()

}

$('input, select').on('keyup change', function () {   
    if($(this).val() !== ""){
       filter(this);  
     } else{
        $('.AvailableGroupLab tbody tr').show();
    }

})

JSFiddle:http://jsfiddle.net/NpLDn/1/

新的JSFiddle(带过滤器):http://jsfiddle.net/NpLDn/4/