фильтр таблицы jQuery с текстом, флажками, выбирает
Должен отфильтровать таблицу от за пределами таблицы, с текстовым поиском, флажками, и выбирает. Фильтр Таблицы PicNet для jQuery работает и на ищущие и на использующие флажки за пределами таблицы..., хотя я не могу найти примеры того, как заставить избранное поле работать. Кто-либо знает?
** Я мог бы становиться слишком конкретным здесь, но думал, что, по крайней мере, запрошу.*
Я также открыт для возможностей кроме PicNet.
ОБНОВЛЕННЫЙ: вот мой код до сих пор, я хотел бы выбор опции наверху тела двумя да/нет флажки.
PicNet Table Filter Demo
Additional Filters for Table 1
Only Show Yes:
Only Show No:
Only Show Item 1:
Quick Find:
Clear Filters
Table 1
Text Column 1 Number Column Yes/No Column List Column No Filter Date Column Empty
Value 102
420
yes
Item 1
hello
01/11//2009
Ed Head
Value 134
987
no
Item 2
hi
03/11//2009
Joe Blow
Value 654
722
yes
Item 3
hello
04/11//2009
Jimmy
2 ответа
Понятия не имею, что вы пытаетесь сделать («Нужно отфильтровать таблицу извне» - что это значит?). Но если вы пытаетесь получить значение поля выбора с помощью jQuery:
$('#yourSelectList').val() // Option value
$('#yourSelectList :selected').text() // Option text value
Просто сделал небольшой пример для вас, чтобы попробовать. Просто быстрое доказательство концепции.
<select id="filter">
<option value="dogs">dogs</option>
<option value="cats">cats</option>
</select>
<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
</tr>
<tr>
<td>cats</td>
</tr>
<tr>
<td>cats</td>
</tr>
<tr>
<td>dogs</td>
</tr>
</table>
И jQuery:
$("#filter").change(function(){
$("#boing").find("td").each(function(){
if($(this).text() != $("#filter").val()) $(this).hide();
else $(this).show();
});
});
Если вы хотите скрыть/показать весь ряд, сделайте $(this).parent().hide() и $(this).parent().show()
Одна вещь, которую нужно иметь в виду: если вы хотите сделать выпадающий список, который проверяет все TD в каждом ряду, вам придется подправить код так, чтобы он скрывал ряд, только если НИ ОДИН из tds не соответствует выпадающему списку. Что-то вроде this.
<select id="filter">
<option value="dogs">dogs</option>
<option value="cats">cats</option>
</select>
<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
<td>cats</td>
</tr>
<tr>
<td>cats</td>
<td>dogs</td>
</tr>
<tr>
<td>cats</td>
<td>cats</td>
</tr>
<tr>
<td>dogs</td>
<td>cats</td>
</tr>
</table>
И jQuery:
$("#filter").change(function(){
$("#boing").children('tbody').children('tr').not(':first').each(function(){
var match = false;
$(this).children('td').each(function() {
if($(this).text() == $("#filter").val()) match = true;
});
if(match) $(this).show();
else $(this).hide();
});
});