Question

在此代码中，当有人输入用户名时，我只想显示该行并隐藏其他行。

<input type="text" id="usearch">
<table class="table myTable">
    <thead>
        <tr>        
            <th></th>
            <th>User</th>                                            
        </tr>
    </thead>   
    <tbody id="searchbody">
        <tr>
            <td>Jhon</td>
        </tr>
        <tr>
            <td>Jane</td>
        </tr>
        <tr>
            <td>Sarah</td>
        </tr>
        <tr>
            <td>Peter</td>
        </tr>
        <tr>
            <td>Paul</td>
        </tr>
    </tbody>
</table>



jquery

$(document).on('keyup','.myTable',function() {
    var uval = $(this).val();
    alert(uval);
    if(uval != '') {
        $('.myTable tr').hide();
        $('.myTable tr td')each(function() {
            if($(this).is(':contains('+uval+')')) {
                $(this).parent('tr').show();
            }
        });
    }
});

FIDDLE：http://jsfiddle.net/nzhu6/ 它不起作用。代码有什么问题？

Answer 1

keyup事件必须附加到input元素

$('#usearch').on('keyup', function () {
    var uval = $(this).val();
    var $trs = $('.myTable tbody tr');
    if (uval != '') {
        $trs.hide().filter(function(){
            return $(this).text().toLowerCase().indexOf(uval.toLowerCase()) >= 0;
        }).show()
    } else {
        $trs.show();
    }
});

演示：Fiddle

Jquery搜索无法正常工作

1 个答案: