Searching HTML Table [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. 开发者_如何学运维 Closed 9 years ago.

I have created a table with HTML and want to integrate a search box. How do i do that? Can you recommend a good jQuery plugin or better a complete tutorial?

---

A quick and dirty approach, using jQuery:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();
                if (searchText.length > 0){
                    $('td:contains(' + searchText +')')
                        .css('background-color','#f00'); 
                    $('td:not(:contains('+searchText+'))')
                        .css('background-color','#fff');
                }
            });
    });

With the following (x)html:

<table>
    <thead>
        <tr>
            <td colspan="2">
                <label for="searchbox">Search:</label>
                <input type="text" id="searchbox" />
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Something</td>
            <td>More text</td>
        </tr>
        <tr>
            <td>Lorem ipsum</td>
            <td>blah?</td>
        </tr>
    </tbody>
</table>

JS Fiddle demo.

---

Edited to use addClass()/removeClass(), in place of setting the css in the jQuery itself:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();
                if (searchText.length > 0){
                    $('td:contains(' + searchText +')')
                        .addClass('searchResult'); 
                    $('td:not(:contains('+searchText+'))')
                        .removeClass('searchResult');
                }
                else if (searchText.length == 0) {
                    $('td.searchResult')
                        .removeClass('searchResult');
                }
            });
    });

Demo at JS Fiddle.

---

To fade out the table cells that don't contain the search result you can use the following:

jQuery:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();

                if (searchText.length > 0) {
                    $('tbody td:contains('+searchText+')')
                        .addClass('searchResult');
                    $('.searchResult')
                        .not(':contains('+searchText+')')
                        .removeClass('searchResult');

                    $('tbody td')
                        .not(':contains('+searchText+')')
                        .addClass('faded');
                    $('.faded:contains('+searchText+')')
                        .removeClass('faded');
                }
                else if (searchText.length == 0) {
                    $('.searchResult').removeClass('searchResult');
                    $('.faded').removeClass('faded'); 
                }
            });
    });

css:

td.faded {
    opacity: 0.2;
}

Demo at JS Fiddle.

---

There are great answers. But this guy did what i Really wanted. it's slighly different from previous answers

HTML

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
    <thead>
        <tr>
            <th>Name</th>
            <th>Sports</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sachin Tendulkar</td>
            <td>Cricket</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Tiger Woods</td>
            <td>Golf</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Maria Sharapova</td>
            <td>Tennis</td>
            <td>Russia</td>
        </tr>
    </tbody>
</table>

Javascript (Jquery)

// 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;
    }
});

Live Demo: http://blogs.digitss.com/demo/jquery-table-search.html

Source: http://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/

---

searching tables is simple:

$('#table1 tr td').each(function(){
     if ( this.innerHTML.indexOf(searchKeyword) > -1 )
         this.style.color = 'yellow' //found within this td so highlight it
});

---

Thanks David Thomas

Good Solution. Following makes it perfect.

$(document).ready(
function(){
    $('#searchbox').keyup(
        function(){
            var searchText = $(this).val();

            if (searchText.length > 0) {
                $('tbody td:contains('+searchText+')')
                    .addClass('searchResult');
                $('.searchResult')
                    .not(':contains('+searchText+')')
                    .removeClass('searchResult');

                $('tbody td')
                    .not(':contains('+searchText+')')
                    .addClass('faded');
                $('.faded:contains('+searchText+')')
                    .removeClass('faded');

                $('.faded').hide();
                $('.searchResult').show();

            }
            else if (searchText.length == 0) {
                $('.searchResult').removeClass('searchResult');
                $('.faded').removeClass('faded');  
                $('td').show();
            }
        });
});

JS Fiddle demo Updated