Coding Cheatsheets - Learn web development code and tutorials for Software developers which will helps you in project. Get help on JavaScript, PHP, XML, and more.

Post Page Advertisement [Top]

Search Table Row by jquery

Search content from table using jQuery. Live searching method via jquery

Create function to remove highlight content. If content not matched.

function removeHighLighting(elm){
        elm.each(function(){
            var element = $(this);
            element.replaceWith(element.html());
        })
    }

Create function to highlight matched content.

function addHighLighting(elm, data){
        var text = elm.text();
        var highlightedText = '<em>' + data+ '</em>';
        var newText = text.replace(data, highlightedText);
        elm.html(newText);
    }

Search text on keyup

$("#search").on("keyup", function() {
        var value = $(this).val();
        removeHighLighting($("table tr em"));
        $("table tr").each(function(index) {
            if (index !== 0) {
                $row = $(this);       
                var $tdElement = $row.find("td:first");
                var id = $tdElement.text();
                var matchedIndex = id.indexOf(value);               
                if (matchedIndex != 0) {
                    $row.hide();
                }
                else {
                   addHighLighting($tdElement, value);
                    $row.show();
                }
            }
        });
    });

Method 2:

$("#search").keyup(function(){
        _this = this;
        // Show only matching TR, hide rest of them
        $.each($("#table tbody tr"), function() {
            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
               $(this).hide();
            else
               $(this).show();                
        });
    });

No comments:

Post a Comment

Bottom Ad [Post Page]