Фильтр таблицы HTML
Здравствуйте
Есть таблица с двумя селектами, при выборе которых происходит фильтрация (скрытие строк) Как можно сделать фильтрацию взаимосвязанной? Например, если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу пример: http://www.glass-pgc.ru/UntitledKM.html
<script type="text/javascript">
//фильтрация по 1 столбцу
function filter1 (phrase, _id){
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
var cellsV = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); // 1 столбец для фильтрации
var cellsV = [cellsV].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;
}
}
//фильтрация по 2 столбцу
function filter11 (phrase, _id){
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
var cellsV = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g,""); // 2 столбец для фильтрации
var cellsV = [cellsV].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>
<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><select name="filt" onchange="filter1(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option>
<option value="зеленый">зеленый</option>
<option value="красный">красный</option>
</select> </td>
<td><select name="filt" onchange="filter11(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option>
<option value="да">да</option>
<option value="нет">нет</option>
</select></td>
</tr>
<tr>
<td>зеленый 1</td>
<td>да</td>
</tr>
<tr>
<td>зеленый 2</td>
<td>нет</td>
</tr>
<tr>
<td>красный 1</td>
<td>нет</td>
</tr>
<tr>
<td>красный 2</td>
<td>да</td>
</tr>
</table>
|
sashgera,
если ненужно возврата по второй сортировке то можно добавить в строку 27 if(table.rows[r].style.display == 'none' ) continue; |
рони,
спасибо, но возврат нужен и по первой и по второй сортировке |
Зависимая фильтрация строк в таблице
sashgera,
:write: ... можно добавлять столбцы с такойже структурой - в первой ячейке должен быть селектор.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<select>
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option>
<option value="зеленый">зеленый</option>
<option value="красный">красный</option>
</select>
</td>
<td>
<select>
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option>
<option value="да">да</option>
<option value="нет">нет</option>
</select>
</td>
</tr>
<tr>
<td>зеленый 1</td>
<td>да</td>
</tr>
<tr>
<td>зеленый 2</td>
<td>нет</td>
</tr>
<tr>
<td>красный 1</td>
<td>нет</td>
</tr>
<tr>
<td>красный 2</td>
<td>да</td>
</tr>
</table>
<input type="button" value="reset" class="res"/>
<p>Как можно сделать: если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу </p>
<p>например, выбираем в первом столбце ЗЕЛЕНЫЙ, во втором ДА, и в результате остается одна строка - зеленый 1 да </p>
<table border="1" cellpadding="0" cellspacing="0" id="sf2" style="width: 400px;">
<tr>
<td>зеленый 1</td>
<td>да</td>
</tr>
</table>
<script>
window.onload = function() {
var tab = document.querySelector('#sf'),
tr = tab.querySelectorAll('tr:nth-child(n+2)'),
sel = tab.querySelectorAll('select'),
arr = [],
res = document.querySelector('.res');
Array.prototype.forEach.call(sel, function(a, b) {
arr[b] = a.value;
a.onchange = function() {
arr[b] = a.value;
a.options[0].selected = !0;
Array.prototype.forEach.call(tr, function(a, b) {
var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
return RegExp(arr[b]).test(a.textContent)
});
a.style.display = c ? "" : "none"
})
}
});
res.onclick = function() {
for (var i=0; i<sel.length; i++) {sel[i].onchange()} }
}
</script>
</body>
</html>
|
рони,
большое спасибо! Все отлично работает. Теперь буду думать как динамически изменять option в селектах, на форуме где-то видел такую тему |
рони, не хватает знаний, пожалуйста, если можно - как сделать сброс таблицы в начальное состояние, нажатием кнопки - показать все скрытые javascript строки, пробовал так:
<input type="button" value="reset" onclick="filter_table();" />
<script>
window.onload = function filter_table() {
var tab = document.querySelector('#sf'),
tr = tab.querySelectorAll('tr:nth-child(n+2)'),
sel = tab.querySelectorAll('select'),
arr = [];
Array.prototype.forEach.call(sel, function(a, b) {
arr[b] = a.value;
a.onchange = function() {
arr[b] = a.value;
a.options[0].selected = !0;
Array.prototype.forEach.call(tr, function(a, b) {
var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
return RegExp(arr[b]).test(a.textContent)
});
if(a.style.display = c ? "" : 'none') { //сброс таблицы в начальное состояние, нажатием кнопки - показать все скрытые js строки
a.style.display = c ? "" : 'none';
}
else {
a.style.display = c ? "" : '';
}
})
}
});
}
</script>
|
sashgera,
напишите отдельно функцию для вашей кнопки -- в которой циклом обходтся переменная tr -- и назначается a.style.display = ''; |
|
рони, большое спасибо!
|
рони, великолепный код. К сожалению не хватает знаний чуть доработать его самостоятельно. Нет ли возможности сделать, чтобы после выбора в Selectах выбранные значения оставались (не сбрасывались на "Выборка") или эти значения выводились для памяти в столбцах выше/ниже или где-то над таблицей писался список условий. А то пользователи "забывают", что они уже нажимали и могут нажать взаимоисключающие выборы. Смешные они...
|
| Часовой пояс GMT +3, время: 04:53. |