Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Фильтр столбца таблицы... По введенному значению... 
:(
    Опции темы
djundead
Дата 18.1.2007, 13:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Доброго времени суток.
Имеется таблица:
Код

<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)...
PM MAIL   Вверх
dstorm81
Дата 18.1.2007, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

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



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


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
djundead
Дата 18.1.2007, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Тут немного не то, сама таблица по столбцам у меня прекрасно сортируется. Необходим именно фильтр.
Цитата

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

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

Это сообщение отредактировал(а) djundead - 18.1.2007, 14:32
PM MAIL   Вверх
Sardar
Дата 18.1.2007, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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



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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
djundead
Дата 18.1.2007, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



прошу прощения, а можно разжевать?  smile 
PM MAIL   Вверх
Tony
Дата 18.1.2007, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

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



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

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


--------------------
user posted image
user posted image
PM MAIL Skype   Вверх
djundead
Дата 19.1.2007, 11:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Tony, что-то в этой 
Цитата

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

не вижу ни одного фильтра =( сортировка да, фильтры нет =(
PM MAIL   Вверх
Zeroglif
Дата 19.1.2007, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата(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, я привёл этот пример, чтобы было более-менее понятно.

Это сообщение отредактировал(а) Zeroglif - 19.1.2007, 13:14
PM MAIL WWW   Вверх
Sardar
Дата 20.1.2007, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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



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

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Zeroglif
Дата 20.1.2007, 18:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



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

Стараюсь. smile

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

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

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

То бишь с id нужно работать очень даже внимательно. А по большому счёту я с тобой согласен. Почти. smile 
PM MAIL WWW   Вверх
Sardar
Дата 20.1.2007, 19:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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



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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Zeroglif
Дата 20.1.2007, 19:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



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

Это понятно. Зависит от ситуации, тот же баннер может и не залезать в блок кода, в котором, допустим, локально работает getElementsByTagName() (а передвигаться по дереву в свете gecko-вских пустот ещё проблематичнее, и обращаться к корню за id не сильно рационально). В общем, везде есть своё добро и зло, я не проповедую byTagName, но и byId не обожествляю, мне ближе bySituation... smile
PM MAIL WWW   Вверх
djundead
Дата 22.1.2007, 11:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Zeroglif, 
В принципе с селектом разобрался, спасибо.

Вот только с реализацией фильтра при вводе посимвольно не очень понятно(
PM MAIL   Вверх
pythonwin
Дата 23.1.2007, 08:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



Zeroglif, ++1
PM WWW GTalk Jabber   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0561 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.