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用于指导。
6年前关闭。
我已经用HTML创建了一个表,并希望集成一个搜索框。我该怎么做?你能推荐一个好的jQuery插件还是更好的完整教程?

最佳答案

使用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
要淡出不包含搜索结果的表格单元格,可以使用以下命令:
查询:
$(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

07-24 09:44
查看更多