Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Фильтр столбца таблицы...


Автор: djundead 18.1.2007, 13:03
Доброго времени суток.
Имеется таблица:
Код

<table class="sort" align="center" border="1" cellspacing="0" cellpadding="0" rules="colos" width="100%">
    <thead>
        <tr>
            <td>Заголовок1</td>
            <td>Заголовок2
                        <select name="" id="">
                        <option selected></option>
                        <option value=""></option>
                        <option value=""></option>
                        </select>
                        </td>
            <td>Заголовок3<input type="text" name="" id=""></td>
            <td>Заголовок4</td>
            <td>Заголовок5
                        <select name="" id="">
                        <option selected></option>
                        <option value=""></option>
                        <option value=""></option>
                        </select>
                        </td>
            <td>Заголовок6</td>
        </tr>
    {/if}
    </thead>
    <tbody>
        <tr>
            <td>Содержимое1</td>
            <td>Содержимое2</td>
            <td>Содержимое3</td>
            <td>Содержимое4</td>
            <td>Содержимое5<br /></td>
            <td>Содержимое6</td>
        </tr>    
    </tbody>


Сортировка с помощью JS происходит с уже загруженными данными без обращения к серверу.

Подскажите как можно сделать сортировку (фильтр) по введенным значениям текстового поля (Заголовок3), а так же по выпадающим спискам в полях (Заголовок2) и (Заголовок5)...

Автор: dstorm81 18.1.2007, 13:45
смотри примеры в java script в наших скриптах http://forum.vingrad.ru/topic-104050.html
, я с Tony (если не ошибаюсь) писали уже по этому поводу примеры
а вообще у каждого разные свои мысли так что придется учить javascript полюбому

Автор: djundead 18.1.2007, 14:31
Тут немного не то, сама таблица по столбцам у меня прекрасно сортируется. Необходим именно фильтр.
Цитата

а вообще у каждого разные свои мысли так что придется учить javascript полюбому

Согласен, но в данный момент на это не хватает не сил, не времени (

Автор: Sardar 18.1.2007, 15:32
Пробегаемся по .rows таблицы (всё целиком) или table.tBodies[конкретная секция].rows. В каждом ряду берём row.cells[колонка], проверяем подходит ли значение. Если нет, то ряд_текущий.style.display = "none" или вообще вырезаем.

Автор: djundead 18.1.2007, 16:22
прошу прощения, а можно разжевать?  smile 

Автор: Tony 18.1.2007, 17:47
dstorm81 приветик!
http://forum.vingrad.ru/topic-104050.html ку4а примеров. Enjoy.

dstorm81, зайди в этот пост http://forum.vingrad.ru/topic-130265.html. Тебе будет интерсно. 

Автор: djundead 19.1.2007, 11:20
Tony, что-то в этой 
Цитата

ку4а примеров

не вижу ни одного фильтра =( сортировка да, фильтры нет =(

Автор: Zeroglif 19.1.2007, 13:07
Цитата(djundead @  18.1.2007,  16:22 Найти цитируемый пост)
прошу прощения, а можно разжевать

А чего тут разжёвывать. Очень приблизительно так:
Код

<select onchange="filt(this)">


Код

  function filt(s) {
      // --> сохраняем в переменной все строки нужной таблицы
      var r  = document.getElementsByTagName('table')[0].rows,
          // --> сохраняем количество строк
          i  = r.length,
          // --> выходим на текущую ячейку и сохраняем её индекс
          ii = s.parentNode.cellIndex;
      // --> идём по строкам снизу (исключая нулевую) 
      while (--i) {
          // --> меняем свойство display, сравнивая значение селекта и текст ячейки
          r[i].style.display = s.value != r[i].cells[ii].innerHTML ? 'none' : ''; 
      }
  }


Узкий момент с innerHTML, это будет работать для простейшего варианта, иначе придётся добираться до текста по-другому. И не стоит регистрировать обработчик непосредственно в HTML, я привёл этот пример, чтобы было более-менее понятно.

Автор: Sardar 20.1.2007, 17:47
Цитата(Zeroglif @  19.1.2007,  12:07 Найти цитируемый пост)
document.getElementsByTagName('table')[0]

Zeroglif,  никогда так не пиши, зависишь от вёрстки. В 99% случаев лучше всего обратиться по id (document.getElementById("id");).

Автор: Zeroglif 20.1.2007, 18:39
Цитата(Sardar @  20.1.2007,  17:47 Найти цитируемый пост)
никогда так не пиши

Стараюсь. smile

Способ добраться до таблицы автор вопроса пусть определяет сам, хоть из-под селекта, его дело, это был простейший пример. Можно сделать десяток вариантов, с ООП, с кешированием и прочими прибамбасами...

По сабжу скажу так (давно хотел это сказать) - с практической точки зрения, если код относительно статичен и полностью контролируется, то не вижу ничего плохого в возможности использовать доступ к элементу по индексу. Во всяком случае, это быстрее и помогает не натыкаться на такие кросс-браузерные проблемы/баги как:

- контроль за "пространством имён";
- контроль за регистром id;
- контроль за перекрытием глобальных переменных (ну, очень часто встречается);
- контроль за перекрытием id и name (даже опытные ошибаются, даже в книжках);
- использование IE-оунли-стиля доступа по id (развращает моментально);

То бишь с id нужно работать очень даже внимательно. А по большому счёту я с тобой согласен. Почти. smile 

Автор: Sardar 20.1.2007, 19:24
Zeroglif, ты забыл учесть что скрипт может использоваться на разных страницах, а туда народ иногда баннеры ставит. Так при первом гугловом текстовом баннере в шапке всё может полететь smile
Если страница действительно никогда не меняется, то можно и по порядковому номеру... до первой правки дизайна, много не хороших слов про тебя потом человек взявшийся за это скажет  smile 

Автор: Zeroglif 20.1.2007, 19:47
Цитата(Sardar @  20.1.2007,  19:24 Найти цитируемый пост)
много не хороших слов

Это понятно. Зависит от ситуации, тот же баннер может и не залезать в блок кода, в котором, допустим, локально работает getElementsByTagName() (а передвигаться по дереву в свете gecko-вских пустот ещё проблематичнее, и обращаться к корню за id не сильно рационально). В общем, везде есть своё добро и зло, я не проповедую byTagName, но и byId не обожествляю, мне ближе bySituation... smile

Автор: djundead 22.1.2007, 11:52
Zeroglif, 
В принципе с селектом разобрался, спасибо.

Вот только с реализацией фильтра при вводе посимвольно не очень понятно(

Автор: pythonwin 23.1.2007, 08:56
Zeroglif, ++1

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)