В ходе разработки сайта была поставлена задача создать таблички с функцией фильтрации. Сам начинающий, поэтому нашел готовое решение, но столкнулся с тем, что не понимаю как размножить нужный мне фильтр и удалить мне не нужные.
Ниже разметка таблицы:
<table>
<thead>
<tr>
<th>Символы</th>
<th>Текст</th>
<th>Цифры</th>
<th>Цифры</th>
<th>Текст</th>
</tr>
<tr>
<td>
<input type="checkbox" id="charA" value="A" />A
<input type="checkbox" id="charB" value="B" />B
<input type="checkbox" id="charC" value="C" />C
</td>
<td>
<input id="text" />
</td>
<td>
<select id="digits">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<input type="radio" name="digit" id="radioZ" value="" checked="true" />-
<input type="radio" name="digit" id="radioA" value="1" />1
<input type="radio" name="digit" id="radioB" value="2" />2
<input type="radio" name="digit" id="radioC" value="3" />3
</td>
<td>
<input id="regexp" />
</td>
</tr>
</thead>
<tbody id="target">
<tr>
<td>B</td><td>Арбуз</td><td>2</td><td>3</td><td>Фанат</td>
</tr>
<tr>
<td>B</td><td>Стрелок</td><td>1</td><td>2</td><td>Арба</td>
</tr>
<tr>
<td>C</td><td>Фанат</td><td>3</td><td>1</td><td>Стрелок</td>
</tr>
<tr>
<td>C</td><td>Стрелок</td><td>2</td><td>1</td><td>Фантомас</td>
</tr>
<tr>
<td>B</td><td>Стрелок</td><td>1</td><td>2</td><td>Арбуз</td>
</tr>
<tr>
<td>C</td><td>Фанат</td><td>3</td><td>3</td><td>Стрелок</td>
</tr>
<tr>
<td>A</td><td>Арбуз</td><td>2</td><td>2</td><td>Арбуз</td>
</tr>
<tr>
<td>A</td><td>Фанат</td><td>1</td><td>1</td><td>Стрелочник</td>
</tr>
<tr>
<td>C</td><td>Фанат</td><td>3</td><td>3</td><td>Арбуз</td>
</tr>
<tr>
<td>B</td><td>Фанат</td><td>2</td><td>3</td><td>Фантик</td>
</tr>
<tr>
<td>C</td><td>Стрелок</td><td>1</td><td>1</td><td>Арбуз</td>
</tr>
<tr>
<td>C</td><td>Фанат</td><td>3</td><td>2</td><td>Стрелка</td>
</tr>
</tbody>
</table>
Так подключаются фильтры в найденном решении:
filterTable( document.getElementById("target"), {
/* Фильтр для первого столбца чекбоксы: */
0: new filterTable.Filter([ /* Элементы фильтра */
document.getElementById("charA"),
document.getElementById("charB"),
document.getElementById("charC")
],
/* Коллбэк ф-ция валидации */
function (value, filters, i) {
/* Если чекбокс не отмечен - его значение не учавствует
в валидации поэтому мы обязаны вернуть true */
if (false === filters[i].checked) return true;
/* Далее, при проверке, мы должны одновременно проверять
значения всех элементов набора при условии чекбокс
отмечен */
return filters[0].checked && filters[0].value === value ||
filters[1].checked && filters[1].value === value ||
filters[2].checked && filters[2].value === value;
}
),
/* Фильтр для второго столбца текстовое поле - только точное совпадение: */
1: document.getElementById("text"),
/* Фильтр для третьего столбца выпадающий список: */
2: document.getElementById("digits"),
/* Фильтр для четвертого столбца радио кнопки: */
3: new filterTable.Filter([/* Элеменеты фильтра */
document.getElementById("radioZ"),
document.getElementById("radioA"),
document.getElementById("radioB"),
document.getElementById("radioC")
],
/* Коллбэк ф-ция валидации */
function (value, filters, i) {
/* В filters[0] - у нас радио кнопка "Не выбрано", если она
установлена фильтр не участвует в валидации и мы
обязаны вернуть true */
if (true === filters[0].checked) return true;
/* Если какая то радиокнопка отмечена и содержимое проверяемой
ячейки совпало то вернем true */
return filters[1].checked && filters[1].value === value ||
filters[2].checked && filters[2].value === value ||
filters[3].checked && filters[3].value === value;
}
),
/* Фильтр для пятого столбца Постепенный ввод слова: */
4: new filterTable.Filter(document.getElementById("regexp"),
/* Коллбэк ф-ция валидации */
function (value, filters, i) {
return value.indexOf(filters[i].value) === 0;
},
/* Будем вызывать валидацию по событию onkeyup фильтра */
"onkeyup"
)
}
);
Сам скрипт:
var filterTable=function(b,c){var d=b.getElementsByTagName("TR"),e={},a;for(a in c)c.hasOwnProperty(a)&&(e[a]=c[a]instanceof filterTable.Filter?c[a]:new filterTable.Filter(c[a]),e[a]._setAction("onchange",function(){var a,c,b;for(c=0;c<d.length;c+=1)for(b in a=d.item(c),e)if(e.hasOwnProperty(b))if(!1===e[b].validate(a.children[b].innerText)){a.style.display="none";break}else a.style.display=""}))};filterTable.Filter=function(b,c,d){if(!(this instanceof arguments.callee))return new arguments.callee(b,c,d);this.filters="[object Array]"=={}.toString.call(b)?b:[b];this.validate=function(c){for(var a=0;a<this.filters.length;a+=1)if(!1===this.__validate(c,this.filters[a],a))return!1};this.__validate=function(b,a,f){if("undefined"!==typeof c)return c(b,this.filters,f);a.value=a.value.replace(/^\s+jQuery/g,"");return!a.value||a.value==b};this._setAction=function(c,a){for(var b=0;b<this.filters.length;b+=1)this.filters[b][d||c]=a}};
Задача продублировать фильтр "digits" для всех столбцов кроме первого. Ниже разметка уже моей таблицы.
<table class="gooog">
<thead>
<tr class="head2">
<th>Название</th>
<th>Длина, мм</th>
<th>Ширина, мм</th>
<th>Высота, мм</th>
<th>Масса, тн</th>
</tr>
<tr class="head3">
<td>
<input id="text" />
</td>
<td class="head3">
<select id="digits">
<option value="">Все</option>
<option value="6000">6000</option>
</select>
</td>
<td class="head3">
<select id="digits">
<option value="">Все</option>
<option value="2000">2000</option>
</select>
</td>
<td class="head3">
<select id="digits">
<option value="">Все</option>
<option value="140">140</option>
<option value="180">180</option>
</select>
</td>
<td class="head3">
<select id="digits">
<option value="">Все</option>
<option value="4,2">4,2</option>
<option value="5.4">5.4</option>
</select>
</td
</tr>
</thead>
<tbody id="target">
<tr class="head" onclick="location.href=''">
<td>ПДН 6*2</td>
<td>6000</td>
<td>2000</td>
<td>140</td>
<td>4.2</td>
</tr>
<tr class="head" onclick="location.href=''">
<td>ПАГ-14</td>
<td>6000</td>
<td>2000</td>
<td>140</td>
<td>4.2</td>
</tr>
<tr class="head" onclick="location.href=''">
<td>ПАГ-18</td>
<td>6000</td>
<td>2000</td>
<td>180</td>
<td>5.4</td>
</tr>
</tbody>
</table>
Простой