搜索 HTML 表 [关闭]答案

【问题标题】：Searching HTML Table [closed]搜索 HTML 表 [关闭]
【发布时间】：2011-05-18 12:37:24
【问题描述】：

我创建了一个带有 HTML 的表格，并希望集成一个搜索框。我怎么做？你能推荐一个好的jQuery插件或更好的完整教程吗？

【问题讨论】：

【解决方案1】：

使用 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');
                }
            });
    });

使用以下 (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.

编辑使用addClass()/removeClass()，代替在jQuery本身中设置css：

$(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.

要淡出不包含搜索结果的表格单元格，您可以使用以下命令：

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.

【讨论】：

嘿太棒了..thnks..我如何只显示所需的搜索而不是突出显示它？

【解决方案2】：

有很好的答案。但是this 家伙做了我真正想要的。和以前的答案略有不同

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

现场演示：http://blogs.digitss.com/demo/jquery-table-search.html

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

【讨论】：

【解决方案3】：

搜索表格很简单：

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

【讨论】：

【解决方案4】：

感谢大卫·托马斯

很好的解决方案。跟随使它完美。

$(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

【讨论】：