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 に答える