jQuery表filter,带有文本,复选框,选择

需要从表格外部过滤表格,包括文本搜索,复选框和选择。 用于jQuery的PicNet表filter适用于搜索和使用表外的复选框…虽然我找不到任何有关如何使选择框工作的示例。 谁知道?

**我可能会在这里变得过于具体,但我想我至少会询问。*

我也对PicNet以外的其他可能性持开放态度。

更新 :到目前为止,这是我的代码,我想通过两个是/否复选框在主体顶部选择一个选项。

  PicNet Table Filter Demo    $(document).ready(function() { // Randomly Create Data Rows // Initialise Plugin var options1 = { additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#itemone'), $('#quickfind')], clearFiltersControls: [$('#cleanfilters')], matchingRow: function(state, tr, textTokens) { if (!state || !state.id) { return true; } var val = tr.children('td:eq(2)').text(); var val2 = tr.children('td:eq(3)').text(); switch (state.id) { case 'onlyyes': return state.value !== 'true' || val === 'yes'; case 'onlyno': return state.value !== 'true' || val === 'no'; case 'itemone': return state.value !== 'true' || val2 === 'Item 1'; default: return true; } } }; $('#demotable1').tableFilter(options1); });   * { font-family:arial; font-size:8pt;} table, td, th { border: solid 1px silver; color:#666; padding:3px 5px 3px 5px} th { background-color:#333; color:#fff; font-size:0.85em } a { color:gray; } .filtering { background-color:light-gray} #jqtf_filters { list-style:none; } #jqtf_filters li { display:inline-block; position:relative; float:left; margin-bottom:20px } .hidden, tr.filters { display: none;}    Additional Filters for Table 1
Only Show Yes: Only Show No: Only Show Item 1:
Quick Find:
Clear Filters
Table 1
Text Column 1Number ColumnYes/No ColumnList ColumnNo FilterDate ColumnEmpty
Value 102 420 yes Item 1 hello 01/11//2009
Value 134 987 no Item 2 hi 03/11//2009
Value 654 722 yes Item 3 hello 04/11//2009

只是为你做了一个小例子试试 。 只是一个快速的概念certificate。

  
header
dogs
dogs
cats
cats
dogs

和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的NONE与下拉列表匹配时它才会隐藏行。 像这样的东西。

  
header
dogs dogs
dogs cats
cats dogs
cats cats
dogs cats

和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(); }); });​ 

我不知道你要做什么(“需要从桌子外面过滤一个桌子” – wtf是什么意思?)。 但是,如果您尝试使用jQuery获取选择框的值:

 $('#yourSelectList').val() // Option value $('#yourSelectList :selected').text() // Option text value