通过输入值过滤表格，在键上（简化我的代码） [英] Filter a table by input value, on key up (simplify my code)
问题描述
代码：
< script>
$（document）.ready（function（）{
//声明自定义选择器'containsIgnoreCase'。
$ .expr ['：']。containsIgnoreCase = function（n，i， m）{
return jQuery（n）.text（）。toUpperCase（）。indexOf（m [3] .toUpperCase（））> = 0;
};
$（＃searchInput）。keyup（function（）{
$ b $（＃fbody）。find（tr）。hide（）;
var data = this find（tr）;
$ .each（data，function（i，v）{
//使用新的containsIgnoreCase函数
jo = jo.filter（*：containsIgnoreCase（'+ v +'））;
}）;
jo.show（）;
}）。focus（function（）{
this.value =;
$（this）.css（{ color：black}）;
$（this）.unbind（'focus'）;
}）。css（{color：＃C0C0C0}）;
}）;
< / script>
HTML：
<表>
< thead>
< tr>
< td><输入值=动物>< / td>
< td><输入值=数字>< / td>
< / tr>
< / thead>
< tbody>
< tr>< td> cat< / td>< td> one< / td>< / tr>
< tr>< td>狗< / td>< td> two< / td>< / tr>
< tr>< td> cat< / td>< td> three< / td>< / tr>
< tr>< td>驼鹿< / td>< td>四< / td>< / tr>
< tr>< td>鼠标< / td>< td>五< / td>< / tr>
< tr>< td>狗< / td>< td>六< / td>< / tr>
< / tbody>
< / table>
您可以这样做，我没有重用你有的任何代码。我在矿井里解释了它在做什么。
$（th input [type = text]）。 ）{
var reg = new RegExp（this.value，'i'）; //< - 正则表达式不区分大小写
var ind = $（this）.closest（'th'）。index （）; //索引th - 所以我们知道哪一边要过滤
var tds = $（'tr'）。find（'td：eq（'+ ind +'）'）; //得到对应的td's
var match = tds.filter（function（i，v）{
return reg.test（$（v）.text（））; //只返回匹配
的td }）;
tds.not（match）.css（'visibility'，'hidden'）; //隐藏不匹配
match.css（'visibility'，'visible'） ; //显示匹配
}）;
I have a solution already, but it's messy and could use some tweaking. Basically, I have two tables on a page and each table has an input text box for every column with a corresponding filter name. The idea is that while the user is typing above that column, the table is being filtered by each variable. This is where I found my solution, but this is only for one input box, and one table. Also when you clear the input box, the entire table clears. I like that this example isn't case sensitive, but it has a few bugs. http://www.marceble.com/2010/02/simple-jquery-table-row-filter/ Here's a jsfiddle that I put together, yet it isn't filtering as it should. http://jsfiddle.net/anschwem/mAAvW/
Code:
<script>
$(document).ready(function() {
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#searchInput").keyup(function(){
$("#fbody").find("tr").hide();
var data = this.value.split(" ");
var jo = $("#fbody").find("tr");
$.each(data, function(i, v){
//Use the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
jo.show();
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
</script>
HTML:
<table>
<thead>
<tr>
<td><input value="Animals"></td>
<td><input value="Numbers"></td>
</tr>
</thead>
<tbody>
<tr><td>cat</td><td>one</td></tr>
<tr><td>dog</td><td>two</td></tr>
<tr><td>cat</td><td>three</td></tr>
<tr><td>moose</td><td>four</td></tr>
<tr><td>mouse</td><td>five</td></tr>
<tr><td>dog</td><td>six</td></tr>
</tbody>
</table>
You can do something like this, I didn't reuse any of the code you had. I explained in mines what it's doing though.
$("th input[type=text]").keyup(function () {
var reg = new RegExp(this.value, 'i'); // <-- regex case insensitive
var ind = $(this).closest('th').index(); // index of th - so we know which side to filter
var tds = $('tr').find('td:eq(' + ind + ')'); // get the corresponding td's
var match = tds.filter(function (i, v) {
return reg.test($(v).text()); // return only td's that match
});
tds.not(match).css('visibility', 'hidden'); // hide ones that don't match
match.css('visibility', 'visible'); // show matching
});
这篇关于通过输入值过滤表格，在键上（简化我的代码）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
