Этот вариант фильтрации позволяет фильтровать данные в таблице по всем столбцам и по нескольким. Те строки, которые не подходят под введенные в фильтр данные будут скрываться.
Фильтрация по всем столбцам
Для этого надо задать таблице id=»sf», а поле input, в который будет вводиться фильтруемый текст дописать вызов функции с передачей id таблицы onkeyup=»filter(this, ‘sf’)».
<script type="text/javascript">
function filter (phrase, _id){
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++){
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i])>=0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
Фильтр по всем полям<br />
<input name="filt" onkeyup="filter(this, 'sf')" style="width:350px;" type="text" /><br /><br />
<table id="sf" border="0" cellpadding="2" cellspacing="1" width="100%"> <tbody><tr>Данные вашей таблицы</tr></tbody></table>
В случае фильтрации по определенным столбцам надо всего лишь указать номера столбцов (первый столбец имеет номер 0) в скрипте. Например, cells[0]. Если столбцов больше двух — надо добавить переменные cellsV3 и т.д. и потом не забыть склеить их в одну переменную cellsV.
<script type="text/javascript">
function filter2 (phrase, _id){
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
for (var r = 1; r < table.rows.length; r++){
var cellsV1 = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); //указать первый столбец
var cellsV2 = table.rows[r].cells[3].innerHTML.replace(/<[^>]+>/g,""); //указать второй столбец
var cellsV = [cellsV1,cellsV2].join(" "); //соединить столбцы для сравнения с введенными данными
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (cellsV.toLowerCase().indexOf(words[i])>=0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
Фильтр по полям Project и Activity <br />
<input name="filt" onkeyup="filter2(this, 'sf')" style="width:350px;" type="text" />
<table id="sf" border="0" cellpadding="2" cellspacing="1" width="100%"> <tbody><tr>Данные вашей таблицы</tr></tbody></table>