У меня есть раздел администратора в приложении, которое может иметь огромное количество строк. Для удобства я добавил текстовое поле «Фильтр», которое отвечает на событие keyup и ищет таблицу и скрывает записи, которые не соответствуют критериям. Он хорошо работает во всех браузерах. ЗА ИСКЛЮЧЕНИЕМ Internet Explorer, который является браузером по умолчанию моей компании.Таблица Строка фильтра не работает в IE
ОБРАЗЦА HTML
<form class="filter-form">Filter:
<input name="filter" class="rowFilter" value="" maxlength="30" size="30" type="text"> <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/
Заранее спасибо за ваше время и помощь.
FYI, псевдо селекторы не будет работать в IE <9. –
Привет нашел пример, который работает на ie-9, который может помочь вам ... http: //jsfiddle.net/prowla/YUtYu/ – codebreaker
Незначительное примечание с вашим кодом ... вы, вероятно, захотите показать все по умолчанию, а затем спрячьте строки, которые не совпадают , (в настоящее время в вашем jsfiddle, если вы наберете «3», тогда backspace (сотрите его), он не покажет никаких результатов. – scunliffe