Jquery: How To Hide Tables Depending On Text Input
I have one text input box and multiple HTML-tables like this: &
Solution 1:
Try this Demo
$("#search").keyup(function () {
var txtVal = $(this).val();
if (txtVal != "") {
$(".tblDetails").show();
$(".message").remove();
$.each($('.tblDetails'), function (i, o) {
var match = $("td:contains-ci('" + txtVal + "')", this);
if (match.length > 0) $(match).parent("tr").show();
else $(this).hide();
});
} else {
// When there is no input or clean again, show everything back
$("tbody > tr", this).show();
}
if($('.tblDetails:visible').length == 0)
{
$('#search').after('<p class="message">Sorry No results found!!!</p>');
}
});
// 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;
}
});
Post a Comment for "Jquery: How To Hide Tables Depending On Text Input"