VPF::Фильтр таблицы - Форум программистов

sashgera

Дата 9.11.2014, 23:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Здравствуйте
есть фильтрация по таблице, вот пример: http://www.glass-pgc.ru/Untitled-for2.html

Код


 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()}               }
        }
}

Код


<table id="sf" width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<select>
<option selected="selected" value="">-- Первая колонка --</option>
<option value="">Выбрать все</option>
<option value="строка (1)">строка (1)</option>
<option value="(тест 1)">(тест 1)</option>
<option value="тест">тест</option>
<option value="строка (1) строка">строка (1) строка</option>
</select>
</td>
<td>
<select>
<option selected="selected" value="">-- Вторая колонка --</option>
<option value="">Выбрать все</option>
<option value="один">один</option>
<option value="два">два</option>
<option value="три">три</option>
<option value="четыре">четыре</option>
</select>
</td>
</tr>
<tr>
  <td>строка (1)</td>
  <td>один</td>
</tr>
<tr>
  <td>(тест 1)</td>
  <td>два</td>
</tr>
<tr>
<td>тест</td>
<td>три</td>
</tr>
<tr>
  <td>строка (1) строка</td>
  <td>четыре</td>
</tr>
</table>

Пожалуйста, помогите с такой проблемой
- если в ячейке таблицы присутствует текст с круглыми скобками и скобки набраны не в начале текста - то совпадения при фильтрации не будут найдены
Как сделать, чтобы скобки и другие знаки не влияли на фильтрацию?

пытался сделать так, но ничего не получилось:

Код


return RegExp(arr[b]).innerHTML.replace(/<[^>]+>/g,"");

Это сообщение отредактировал(а) sashgera - 11.11.2014, 22:37

sQu1rr

Дата 11.11.2014, 12:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 2
Всего: 13

Код не стал читать, он некрасивый

Цитата(sashgera @ 9.11.2014, 23:46

)

Как сделать, чтобы скобки и другие знаки не влияли на фильтрацию?

Код


return RegExp(arr[b]).innerHTML.replace(/<[^>]+>/g,"");

А вы не забыли?

Код


return RegExp(arr[b]).innerHTML.replace(/<[^>]+>/g,"").test(a.textContent);

Но опять же код не читал, поэтому не уверен что правильное советую smile

Но вот /<[^>]+>/g лучше записать как /\W/g - тоесть заменить все НЕ БУКВЫ (правда пробелы уберет а цифры оставит). а еще можно и case insensitive делать smile

Это сообщение отредактировал(а) sQu1rr - 11.11.2014, 12:51

sashgera

Дата 11.11.2014, 20:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Цитата(sQu1rr @ 11.11.2014, 12:50

)

А вы не забыли?

Цитата(sQu1rr @ 11.11.2014, 12:50

)

return RegExp(arr).innerHTML.replace(/<[^>]+>/g,"").test(a.textContent);

[B]sQu1rr, спасибо что ответили, но js с таким регулярным выражением перестал выполняться

Это сообщение отредактировал(а) sashgera - 11.11.2014, 20:51

sQu1rr

Дата 11.11.2014, 21:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 2
Всего: 13

А как он вообще выполнялся? у RegExp нету переменной innerHTML smile

Так что подумайте еще, а лучше сделайте код читаемым и выложите в jsfiddle

sQu1rr

Дата 12.11.2014, 01:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 2
Всего: 13

Все проще простого, вы же используете value <option> элементов как регулярное вырожение. Так вот, в регулярном выражении скобки - это специальный символ и их нужно эскейпить

Код


<option value="строка \(1\)">строка (1)</option>
<option value="\(тест 1\)">(тест 1)</option>
<option value="тест">тест</option>
<option value="строка \(1\) строка">строка (1) строка</option>

sashgera

Дата 12.11.2014, 10:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

sQu1rr, спасибо!

sQu1rr

Дата 12.11.2014, 12:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 2
Всего: 13

Цитата(sashgera @ 12.11.2014, 10:31

)

sQu1rr, спасибо!

Помечайте вопрос отвеченными ;) Не за что

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »