Здравствуйте
Есть таблица с двумя селектами, при выборе которых происходит фильтрация (скрытие строк)
Как можно сделать фильтрацию взаимосвязанной?
Например, если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу
пример:
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>