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 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
只是为你做了一个小例子试试 。 只是一个快速的概念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