0

我在一个可以有大量行的应用程序中有一个管理部分。为方便起见，我添加了一个“过滤器”文本框，它响应 keyup 事件并搜索表并隐藏不符合条件的记录。它适用于所有浏览器，除了我公司的默认浏览器 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（keyup 代码在 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/

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

4

1 回答 1

0

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

于 2013-09-17T13:34:42.640 回答