Question

我在应用程序中有一个管理部分，可以有大量的行。为方便起见，我添加了一个“过滤器”文本框，它响应键盘事件并搜索表并隐藏不符合标准的记录。它适用于所有浏览器，除了Internet Explorer，这是我公司的默认浏览器。

示例HTML

<form class="filter-form">Filter:
        <input name="filter" class="rowFilter" value="" maxlength="30" size="30" type="text">&nbsp;<i class="btnClearBudgetsFilter icon-remove-circle"></i>
    </form>
    <table id="tblCompanyTypes" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>COMPANY TYPE</th>
                <th>ACTIONS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Corporate</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='1' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='1' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Development and Construction</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='2' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='2' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Property</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='3' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='3' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Property with Dining</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='4' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='4' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Property with RL</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='5' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='5' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Property with Dining and RL</td>
                <td>
                    <div class='btn-group'>
                        <button class='btnEditRecord btn btn-inverse' data-id='6' data-table='comType'>Edit</button>
                        <button class='btnDeleteRecord btn btn-danger' data-id='6' data-table='comType'>Delete</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

JAVASCRIPT（密钥代码在document.ready函数中）

$(document).on('keyup', '.rowFilter', function(e){
            var term = $(this).val().toLowerCase();

            if( term != ""){
                $('table tbody>tr').hide();
                $( 'table td').filter(function(){
                    return $(this).text().toLowerCase().indexOf(term) >-1
                }).parent('tr').show();
            } else {
                $('table tbody>tr').show();
            } // end if
        });

我创建了一个问题的jsFiddle，并希望有人可以帮助我在IE中完成这项工作。要测试，请键入“cor”或“din。”

jsFiddle：http://jsfiddle.net/GvSv8/1/

提前感谢您的时间和帮助。

Answer 1

嗨，这下面的小提琴在IE中工作，也可以按照你的预期搜索... jsfiddle.net/aPLLF/2

表行筛选器在IE中不起作用

1 个答案: