Question

我正在使用以下代码根据输入文本框中输入的文本过滤表格行（根据此link上给出的解决方案）。

var $rows = $('#deviceInfoTable tr');
        $('#searchVehicleName').keyup(function() {
            var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();

它第一次工作正常，但是当我使用AJAX更改表行时，它不起作用。我的表格结构如下：

 <table width="100%" bordercolor="#ddd" border="1" id="devicesInfoTable" class="table-hover">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" onclick="checkAll(this)"></th>
                                    <th><input type="text" placeholder="Search Vehicle Name" class="form-control" id="searchVehicleName"></th>
                                    <th>Date</th>                       
                                </tr>
                            </thead>
                            <tbody id="deviceInfoTable">
                                <tr>
                                    <td>
                                        <div class="checkbox"> 
                                            <input type="checkbox" onclick="displayLiveLocation()" value="0358911020092058" name="IMEISeries[]" class="IMEISeriesClass[]">
                                        </div>
                                    </td>
                                    <td id="0358911020092058_vname">RJ14</td>
                                    <td id="0358911020092058_vdate">21-Nov-2015 00:45:03</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox"> 
                                            <input type="checkbox" onclick="displayLiveLocation()" value="0358899055641537" name="IMEISeries[]" class="IMEISeriesClass[]">  
                                        </div>
                                    </td>
                                    <td id="0358899055641537_vname">GT06N Test</td>
                                    <td id="0358899055641537_vdate">17-Dec-2015 06:22:52</td>
                                </tr>
                            </tbody>
                        </table>

在AJAX期间，只有tbody的内部HTML会发生变化。我环顾四周，但无法解决任何问题。任何的想法？提前谢谢。

Answer 1

你需要移动你的

var $rows = $('#deviceInfoTable tr');

代码加入keyup函数

$('#searchVehicleName').keyup(function() {
    var $rows = $('#deviceInfoTable tr');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Answer 2

你可以尝试在ajax调用之后使用on事件处理程序：

var $rows = $('#deviceInfoTable tr');
$('#devicesInfoTable').on( "keyup", '#searchVehicleName', function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();

动态更改其内容后，使表行过滤器工作

2 个答案: