UnKnown UnKnown - 1 month ago 7
jQuery Question

On filtering Table using Keyup Jquery, results alignment is improper

I am using KeyuP on a text field , the functionaity works fine , but the results alignment is improper

In the below fiddle

http://jsfiddle.net/cod7ceho/255/

Enter the keyword t

https://unsee.cc/nadiperu/

This is my code

$(document).ready(function()
{
$('#searchinputtext').keyup(function ()
{
$('#errmsgnotags').hide();
var noElemtag = true;

var val = $.trim(this.value).toLowerCase();
var tr = $('#videosfromtagstable tbody td');

el = tr.filter(function() {
return this.innerHTML.toLowerCase().indexOf(val)>=0;
}).closest('td');

if(el.length>=1)
{
noElemtag = false;
}


tr.not(el).fadeOut();
el.fadeIn();

if (noElemtag)
$('#errmsgnotags').html('No Results Matched').show();
})
});

Answer

See http://jsfiddle.net/cod7ceho/256/ to search over rows

UPDATE: or http://jsfiddle.net/cod7ceho/257/ to search over first cell on table

$(document).ready(function()
{
        $('#searchinputtext').keyup(function ()
        {
                    $('#errmsgnotags').hide();
                 var noElemtag = true;

                var val = $.trim(this.value).toLowerCase();
                var tr = $('#videosfromtagstable tbody tr');//use tr not td

                el = tr.filter(function() {
                    return this.innerHTML.toLowerCase().indexOf(val)>=0;
                });// <==== closest("tr") removed

                if(el.length>=1)
                {
                    noElemtag  = false;
                }

                //now you fadeIn/Out every row not every cell
                tr.not(el).fadeOut();
                el.fadeIn();

            if (noElemtag)
    $('#errmsgnotags').html('No Results Matched').show();
        })
});
Comments