Question

我正在使用的搜索表单位于：http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive

我发现Cyruxx创建的一个很好的js搜索表单，我正在我的网站上实现。是否可以修改此代码以仅搜索特定的表头？

例如我有：

     <table class="table table-list-search">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>107</td>
                        <td>John Doe</td>
                        <td>1074 example street</td>
                    </tr>
                    <tr>
                        <td>100</td>
                        <td>Henry</td>
                        <td>1111 example ave</td>
                    </tr>
                </tbody>
            </table>

如何修改代码以仅搜索id列。换句话说，键入数字“1”只会显示“id”标题中带有“1”的表格行。在我的示例中键入“1074”将返回0结果，而键入“1”将显示两个列表。

$(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#system-search').keyup( function() {
       var that = this;
        // affect all table rows on in systems table
        var tableBody = $('.table-list-search tbody');
        var tableRowsClass = $('.table-list-search tbody tr');
        $('.search-sf').remove();
        tableRowsClass.each( function(i, val) {

            //Lower text for case insensitive
            var rowText = $(val).text().toLowerCase();
            var inputText = $(that).val().toLowerCase();
            if(inputText != '')
            {
                $('.search-query-sf').remove();
                tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                    + $(that).val()
                    + '"</strong></td></tr>');
            }
            else
            {
                $('.search-query-sf').remove();
            }

            if( rowText.indexOf( inputText ) == -1 )
            {
                //hide rows
                tableRowsClass.eq(i).hide();

            }
            else
            {
                $('.search-sf').remove();
                tableRowsClass.eq(i).show();
            }
        });
        //all tr elements are hidden
        if(tableRowsClass.children(':visible').length == 0)
        {
            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
        }
    });
});

Answer 1

首先 - 这不是很好的搜索代码，它不是非常严格的预处理，并且以可能难以维护的方式混合视图和模型问题。我建议使用预构建窗口小部件，而不是从博客（或任何地方）复制粘贴您不理解的代码。

要回答您的问题，您可以简单地约束哪些列可以使用css类进行搜索，并将该类用作搜索过滤器：

所以改变

var rowText = $(val).text().toLowerCase();

到

var rowText = $(val).find('.searchable').text().toLowerCase();

然后标记您想要搜索的所有内容：

 <table class="table table-list-search">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="searchable">107</td>
                    <td>John Doe</td>
                    <td>1074 example street</td>
                </tr>
                <tr>
                    <td class="searchable">100</td>
                    <td>Henry</td>
                    <td>1111 example ave</td>
                </tr>
            </tbody>
        </table>

修改javascript表以搜索特定数据

1 个答案: