2013-09-17 3 views
0

У меня есть раздел администратора в приложении, которое может иметь огромное количество строк. Для удобства я добавил текстовое поле «Фильтр», которое отвечает на событие keyup и ищет таблицу и скрывает записи, которые не соответствуют критериям. Он хорошо работает во всех браузерах. ЗА ИСКЛЮЧЕНИЕМ Internet Explorer, который является браузером по умолчанию моей компании.Таблица Строка фильтра не работает в IE

ОБРАЗЦА 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/

Заранее спасибо за ваше время и помощь.

+1

FYI, псевдо селекторы не будет работать в IE <9. –

+0

Привет нашел пример, который работает на ie-9, который может помочь вам ... http: //jsfiddle.net/prowla/YUtYu/ – codebreaker

+1

Незначительное примечание с вашим кодом ... вы, вероятно, захотите показать все по умолчанию, а затем спрячьте строки, которые не совпадают , (в настоящее время в вашем jsfiddle, если вы наберете «3», тогда backspace (сотрите его), он не покажет никаких результатов. – scunliffe

ответ

0

Привет это ниже скрипку работает в IE, а также ищет, как у ожидал ... jsfiddle.net/aPLLF/2

Смежные вопросы