html uiTableFilter - 用于过滤表行的jquery插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html uiTableFilter - 用于过滤表行的jquery插件相关的知识，希望对你有一定的参考价值。
/*
* 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);
});
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;
}<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Check off the foods you want to eat today.</title>
</head>
<body>
<h1>Check off the foods you want to eat today.</h1>
<form id="filter-form" name="filter-form">
Filter: <input id="filter" maxlength="30" name="filter" size="30" type="text" value="">
</form>
<table class="food_planner" border="1">
<thead>
<tr>
<th colspan="2">Your Food List</th>
</tr>
</thead>
<tbody>
<tr>
<td><input checked="checked" id="" name="food_id_1" style="" type="checkbox" value="23558"></td>
<td>Beef, ground, 95% lean meat / 5% fat, patty, cooked, broiled<input name="food_source_row_1" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_2" style="" type="checkbox" value="18061"></td>
<td>Bread, rye, toasted<input name="food_source_row_2" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_3" style="" type="checkbox" value="11742"></td>
<td>Broccoli, cooked, boiled, drained, with salt<input name="food_source_row_3" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_4" style="" type="checkbox" value="1001"></td>
<td>Butter, salted<input name="food_source_row_4" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_5" style="" type="checkbox" value="6242"></td>
<td>CAMPBELL Soup Company, CAMPBELL'S CHUNKY Microwavable Bowls, Chicken and Dumplings Soup<input name="food_source_row_5" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input id="" name="food_id_6" style="" type="checkbox" value="6396"></td>
<td>CAMPBELL Soup Company, CAMPBELL'S CHUNKY Soups, Fajita Chicken with Rice & Beans Soup<input name="food_source_row_6" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_7" style="" type="checkbox" value="11960"></td>
<td>Carrots, baby, raw<input name="food_source_row_7" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_8" style="" type="checkbox" value="1040"></td>
<td>Cheese, swiss<input name="food_source_row_8" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_9" style="" type="checkbox" value="7933"></td>
<td>Chicken breast, oven-roasted, fat-free, sliced<input name="food_source_row_9" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_10" style="" type="checkbox" value="14209"></td>
<td>Coffee, brewed from grounds, prepared with tap water<input name="food_source_row_10" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_11" style="" type="checkbox" value="1130"></td>
<td>Egg, whole, cooked, omelet<input name="food_source_row_11" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_12" style="" type="checkbox" value="18265"></td>
<td>English muffins, wheat, toasted<input name="food_source_row_12" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input id="" name="food_id_13" style="" type="checkbox" value="15092"></td>
<td>Fish, sea bass, mixed species, cooked, dry heat<input name="food_source_row_13" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_14" style="" type="checkbox" value="18640"></td>
<td>HEINZ, WEIGHT WATCHER, Chocolate Eclair, frozen<input name="food_source_row_14" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_15" style="" type="checkbox" value="42138"></td>
<td>Mayonnaise, reduced-calorie or diet, cholesterol-free<input name="food_source_row_15" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input id="" name="food_id_16" style="" type="checkbox" value="4053"></td>
<td>Oil, olive, salad or cooking<input name="food_source_row_16" type="hidden" value="USDA"></td>
</tr>
<tr style="display: table-row;">
<td><input checked="checked" id="" name="food_id_17" style="" type="checkbox" value="9203"></td>
<td>Oranges, raw, Florida<input name="food_source_row_17" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_18" style="" type="checkbox" value="20047"></td>
<td>Rice, white, long-grain, parboiled, enriched, cooked<input name="food_source_row_18" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input checked="checked" id="" name="food_id_19" style="" type="checkbox" value="18350"></td>
<td>Rolls, hamburger or hotdog, plain<input name="food_source_row_19" type="hidden" value="USDA"></td>
</tr>
<tr>
<td><input id="" name="food_id_20" style="" type="checkbox" value="14476"></td>
<td>Tea, ready-to-drink, LIPTON BRISK iced tea, with lemon flavor<input name="food_source_row_20" type="hidden" value="USDA"></td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.uitablefilter.js"></script>
<script>
$(function() {
var theTable = $('table.food_planner')
theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){
$(this).prev().find(":checkbox").click()
});
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
$('#filter-form').submit(function(){
theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
return false;
}).focus(); //Give focus to input field
});
</script>
</body>
</html>以上是关于html uiTableFilter - 用于过滤表行的jquery插件的主要内容，如果未能解决你的问题，请参考以下文章