Try using the following or something like it for your use.
$("#searchUserInput").on("keyup",function() {
var filterThis = $(this).val().toLowerCase();
$('.listUserContent').each(function () { //my rows have this class on it
var filterObj = $(this).data("searchusertitle").toLowerCase(); //my rows have this data-serachusertitle
(filterObj.indexOf(filterThis) >= 0) ? $(this).removeClass("disable") :
$(this).addClass("disable"); //my CSS has a class for disable to set display to none
});
});
It's something that I did a year ago, maybe it's something you can adapt to your needs https://bootstrapstudio.io/forums/topic/issue-in-adding-custom-attributes-to-objects/#post-624
I have tested this to work. Table header rows do not get filtered out, only the tbody rows do. Your original example was saying to filter out trs from the whole table, you needed to specify a different filtering starting point that's why you need a tbody and an ID for it to start filtering from there.
I've tried nth-child and nth-of-type and :not etc... putting an ID on tbody starting the filtering from there seems to be the way to go.