[英]Simple query table search filter
打擊是對表格的基本過濾搜索。 目前它過濾並搜索整個表格(thead&tbody)。 有沒有辦法讓這個腳本只搜索tbody? 我想從過濾后的結果中排除thead,我嘗試將“id =”kwd_search“”附加到而不是標記,但它使腳本無法運行。 另一個我不想做的是在找到結果時將表行縮小。
非常感謝任何幫助,感謝閱讀。 這是我現有的現場演示 。 我真的很慢這個東西,所以如果我能得到一個現場的例子,如果不是很麻煩的話,我會很高興。
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#my-table tbody>tr").hide();
$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#my-table tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
我不想調試contains-ci
方法。 可以用filter()
替換它
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function() {
/* cache td elements to improve search performance*/
var $rows=$("#my-table tbody>tr"), $cells=$rows.children();
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function() {
var term = $(this).val()
// When value of the input is not blank
if(term != "") {
// Show only matching TR, hide rest of them
$rows.hide();
$cells.filter(function() {
return $(this).text().toLowerCase().indexOf(term) > -1;
}).parent("tr").show();
} else {
// When there is no input or clean again, show everything back
$rows.show();
}
});
});
演示: http : //jsfiddle.net/aPLLF/2/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.