Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2015, 22:32
Новичок на форуме
Отправить личное сообщение для banzai Посмотреть профиль Найти все сообщения от banzai
 
Регистрация: 12.02.2015
Сообщений: 1

Фильтр таблицы HTML + JS
Всем доброго времени суток. Прошу помочь с фильтром таблицы HTML на JS, нужен именно JS, не JQ, PHP и т.д. Поискал по форуму, более менее подходит эта тема. В общем-то ее можно использовать под мои задачи, но не совсем, нужно следующее:
1. Необходим отбор данных как по одному, так и по нескольким ячейкам, чем больше ячеек используется для фильтрации результатов, тем точнее и меньше они будут.
2. По кнопке submit применяются выделенные селекты и т.д. По reset сбрасываются фильтры и результат предыдущего отбора.
3. Из выбранных результатов, тоже должна производиться выборка.

P.S. В долгу не останусь.

Примерный код селектов, чекбоксов и кнопок.

Марка
<select id="firm">
                <option value="">---</option>
                <option value="S">Samsung</option>
                <option value="L">LG</option>
                <option value="Sn">Sony</option>
                <option value="A">Apple</option>
</select><br>
Стоимость:
<select id="price">
                <option value="">---</option>
                <option value="1">До 10</option>
                <option value="2">От 11 до 30</option>
                <option value="3">От 31 до 50</option>
                <option value="4">От 51 и выше</option>               
</select><br>
Гарантии:
<select id="gar">
                <option value="">---</option>
                <option value="1">1 год</option>
                <option value="2">От 2 до 5 лет</option>
                <option value="3">От 5 до 7 лет</option>
                <option value="4">От 8 лет и более</option>
/select><br>
Стоимость ремонта:
<select id="fix">
                <option value="">---</option>
                <option value="1">До 1 000</option>
                <option value="2">От 1 100 до 2 000</option>
                <option value="3">От 2 100 до 7 000</option>
                <option value="3">От 7 100 и дороже</option>
</select><br>
Наличие гарантийного талона:
<input type="checkbox" value="A"/>Да
<input type="checkbox" value="B"/>Нет
<br>
<input type="submit" value="Применить">
<input type="reset" value="Очистить">


Таблица
<table>
		<thead>
			<tr>
				<th><h3>№</h3></th>
				<th><h3>Марка</h3></th>
				<th><h3>Стоимость</h3></th>
				<th><h3>Гарантия</h3></th>
				<th><h3>Стоимость ремонта</h3></th>
				<th><h3>Гарантийный талон</h3></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Samsung</td>
				<td>7</td>
				<td>1</td>
				<td>700</td>
				<td>да</td>				
			</tr>
			<tr>
                <td>2</td>
				<td>LG</td>
				<td>18</td>
				<td>4</td>
				<td>1 500</td>
				<td>да</td>				
			</tr>
			<tr>
				<td>3</td>
				<td>Sony</td>
				<td>40</td>
				<td>6</td>
				<td>4 000</td>
				<td>да</td>				
			</tr>
			<tr>
				<td>4</td>
				<td>Apple</td>
				<td>80</td>
				<td>9</td>
				<td>9 000</td>				
				<td>нет</td>				
			</tr>			
		</tbody>
  </table>

Последний раз редактировалось banzai, 12.02.2015 в 22:51.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2015, 00:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

banzai,
1.проще сортировать обьект с данными и потом выводить отфильтрованные данные а не наоборот 2. на каждый селект у вас нужно создать своё правило фильтрации (в примере с темы одно правило на все селекты) ... значит в раздел работа или начинать самому ...
для медитации
плагин без jquery
http://www.javascripttoolbox.com/lib/table/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите плагин для подсветки синтаксиса html css php js кода Кирюха =) Библиотеки/Тулкиты/Фреймворки 2 31.10.2015 06:12
Подсветка строк и столбцов таблицы html sashgera Элементы интерфейса 8 20.12.2014 20:47
JS скрипт замены html candro Общие вопросы Javascript 23 13.11.2014 22:13
Передача параметров JS в HTML Vladimir93 Общие вопросы Javascript 10 11.11.2014 12:17
Не вызывается функция JS в HTML all4me1982 Общие вопросы Javascript 6 04.04.2014 20:08