Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фильтр таблицы HTML + JS (https://javascript.ru/forum/dom-window/53670-filtr-tablicy-html-js.html)

banzai 12.02.2015 22:32

Фильтр таблицы 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>

рони 13.02.2015 00:36

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


Часовой пояс GMT +3, время: 14:38.