jQuery，对表进行筛选
jQuery，对表进行筛选
提问于 2009-11-18 10:42:43
我有一个问题，我用了一个jquery插件(表上的过滤器)。
网址是：http://gregweber.info/projects/demo/flavorzoom.html
但我有一点不同的情况：
取而代之的是(文本框)我使用(下拉菜单)
<select class="filter_tb">
<option value="">All</option>
<option value="6-K">6-K</option>
<option value="20-F">20-F</option>
<option value="SC 13G/A">SC 13G/A</option>
<option value="SC 13G">SC 13G</option>
<option value="F-10/A">F-10/A</option>
<option value="F-X">F-X</option>
<option value="F-10">F-10</option>
</select>我正在按值过滤，但这是一个问题:当我在表格中选择"SC 13G“时，当然会显示"SC 13G/A”。
我能停下来吗？我只想显示"SC 13G“与"F-10 -> F-10/A”相同的内容
这是我的jquery选择器：
$(function() {
var theTable = $('table.RegulatoryFilingsTable')
$(".filter_tb").change(function() {
$.uiTableFilter( theTable, this.value );
});
}); 如果可能的话，帮帮我
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2009-11-18 11:14:16
对于你的场景来说，这个插件可能有点夸大其词。您可以使用下面的jQuery代码片段实现所需的效果：
$(".filter_tb").change(function() {
$(".food_planner tbody tr td:nth-child(2)").each(function () {
if ($(this).text() != this.value) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
});
});如果你想使用这个插件，你可以通过修改下面的代码行来使它工作：
第26行:从var words = phrase.toLowerCase().split(" ");到var words = phrase.toLowerCase();
第87行:从if (text.indexOf(words[i]) === -1) return false;到if (text != words[i]) return false;
Stack Overflow用户
发布于 2009-11-18 11:36:01
因此，如果你想简单地进行精确匹配，过滤器可能有点夸张，但这里有一个额外的函数来实现：
jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
var text = caseSensitive ? str : str.toLowerCase();
if(text == words) return true;
return false;
}以下是我用于测试的完整代码：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./tablefilter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var theTable = $('table.RegulatoryFilingsTable');
$(".filter_tb").change(function() {
$.uiTableFilter( theTable, this.value );
});
});
</script>
</head>
<body>
<select class="filter_tb">
<option value="">All</option>
<option value="6-K">6-K</option>
<option value="20-F">20-F</option>
<option value="SC 13G/A">SC 13G/A</option>
<option value="SC 13G">SC 13G</option>
<option value="F-10/A">F-10/A</option>
<option value="F-X">F-X</option>
<option value="F-10">F-10</option>
</select>
<br/><br/>
<table class="RegulatoryFilingsTable">
<thead><tr><th colspan="2">Your List</th><tr></thead>
<tbody>
<tr><td>6-K</td></tr>
<tr><td>20-F</td></tr>
<tr><td>SC 13G/A</td></tr>
<tr><td>SC 13G</td></tr>
<tr><td>F-10/A</td></tr>
<tr><td>F-X</td></tr>
<tr><td>F-10</td></tr>
</tbody>
</table>
</body>
</html>以及整个修改后的表过滤脚本(我称之为tablefilter.js)：
/*
* Copyright (c) 2008 Greg Weber greg at gregweber.info
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* documentation at http://gregweber.info/projects/uitablefilter
*
* allows table rows to be filtered (made invisible)
* <code>
* t = $('table')
* $.uiTableFilter( t, phrase )
* </code>
* arguments:
* jQuery object containing table rows
* phrase to search for
* optional arguments:
* column to limit search too (the column title in the table header)
* ifHidden - callback to execute if one or more elements was hidden
*/
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
var new_hidden = false;
if( this.last_phrase === phrase ) return false;
var phrase_length = phrase.length;
var words = phrase.toLowerCase().split(" ");
// these function pointers may change
var matches = function(elem) { elem.show() }
var noMatch = function(elem) { elem.hide(); new_hidden = true }
var getText = function(elem) { return elem.text() }
if( column ) {
var index = null;
jq.find("thead > tr:last > th").each( function(i){
if( $(this).text() == column ){
index = i; return false;
}
});
if( index == null ) throw("given column: " + column + " not found")
getText = function(elem){ return jQuery(elem.find(
("td:eq(" + index + ")") )).text()
}
}
// if added one letter to last time,
// just check newest word and only need to hide
if( (words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
this.last_phrase) ) {
if( phrase[-1] === " " )
{ this.last_phrase = phrase; return false; }
var words = words[-1]; // just search for the newest word
// only hide visible rows
matches = function(elem) {;}
var elems = jq.find("tbody > tr:visible")
}
else {
new_hidden = true;
var elems = jq.find("tbody > tr")
}
/* elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.has_words( getText(elem), words, false ) ?
matches(elem) : noMatch(elem);
}); */
elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.is_word( getText(elem), words, false ) ?
matches(elem) : noMatch(elem);
});
last_phrase = phrase;
if( ifHidden && new_hidden ) ifHidden();
return jq;
};
// caching for speedup
jQuery.uiTableFilter.last_phrase = ""
// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
jQuery.uiTableFilter.has_words = function( str, words, caseSensitive )
{
var text = caseSensitive ? str : str.toLowerCase();
for (var i=0; i < words.length; i++) {
if (text.indexOf(words[i]) === -1) return false;
}
return true;
}
jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
var text = caseSensitive ? str : str.toLowerCase();
if(text == words) return true;
return false;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1753298
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号