对keyup的Javascript过滤

Question

下面是我当前的HTML表：

<table class="table table-index">
    <thead>
        <tr class="filters">
            <th><input type="text" id="search_table" class="form-control company-id" placeholder="ID"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Organization"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Contact"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Title"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="City"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="State"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="email"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="contacted"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="hiring"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="hire_count"></th>
            <th>
                <div class="checkbox-inline">
                    <input type="checkbox" id="checkbox1" class="large" data-label-prepend="prefix">
                        <label for="checkbox1">Contacted</label>
                </div>
             </th>
        </tr>
    </thead>


    <tbody>
        <% @companies.each do |company| %>
        <tr>
            <td class="id"><%= company.id %></td>
            <td class="Organization"><%= link_to company.organization,
                    admin_company_path(company.id) %></td>
            <td class="contact"><%= company.name %></td>
            <td class="contact-title"><%= company.title %></td>
            <td class="city"><%= company.city %></td>
            <td class="state"><%= company.state %></td>
            <td class="email"><%= company.email %></td>
            <td class="contacted"><%= company.status %></td>
            <td class="hiring"><%= company.hiring %></td>
            <td class="hire_count"><%= company.hire_count %></td>
        </tr>
        <% end %>
    </tbody>
</table>

这是我的table_filtering.js文件：

$(document).ready(function() {
    if ($(".table-index").length > 0 ) {
        $('#search_table').keyup(function() {
            searchByColumn($(this).val());
        });

        function searchByColumn(searchVal) {
            var table = $('.table-index')
            table.find('tr').each(function(index, row){
                var allDataPerRow = $(row).find('td');
                if (allDataPerRow.length > 0) {
                    var found = false;
                    allDataPerRow.each(function(index, td) {
                        var regExp = new RegExp(searchVal, "i");

                        if(regExp.test($(td).text())) {
                            found = true
                            return false;
                        }
                  });

                  if(found === true) {
                      $(row).show();
                  }else {
                      $(row).hide();
                  }
                }
            });
        }
    }
});

问题是，我只是通过第一个$("#search_table") ( ID列)进行过滤，而不是通过任何文本框进行过滤。如何才能使所有文本框都进行过滤？我还希望用户能够通过多个文本框进行筛选。因此，如果用户输入城市和标题，结果只会由城市和标题显示。

另外，我的当前筛选是否与will_paginate兼容？意思是..。其他网页的结果会被搜索吗？

Answer 1

在这种情况下，您所需要做的就是从使用is更改为类。

<tr class="filters">
    <th>
        <input type="text" class="search_table form-control company-id" placeholder="ID" />
    </th>
    <!-- etc -->            

相关的JS部件将使用.search_table选择器：

$('.search_table').keyup(function() {
    searchByColumn($(this).val());
});

http://plnkr.co/edit/CXuhR4ucd4bFKbrifVMp?p=preview

Answer 2

我使用类.form-control获取所有输入，并将它们传递给函数。然后检查输入是否有一个值，如果没有，则不考虑它。对于每个输入，只搜索相同的列索引(例如，对于id，我只使用index=0筛选td，等等)。对于每个不匹配值的输入行，将给出一个具有display: none;样式的类display: none;。

jsfiddle DEMO

jQuery:

if ($(".table-index").length > 0) {
    $('.form-control').keyup(function () {
        var inputs = ($('.form-control'));
        searchByColumn(inputs);
    });

    function searchByColumn(inputs) {
        $('.table-index tr').removeClass('hide');
        var table = $('.table-index');
        inputs.each(function () {
            var idx = $(this).parent().index();
            var searchVal = $(this).val();
            if (searchVal != "") {
                table.find('tr').not('.hide').each(function (index, row) {
                    var allDataPerRow = $(row).find('td').eq(idx);
                    if (allDataPerRow.length > 0) {
                        var found = false;
                        allDataPerRow.each(function (index, td) {
                            var regExp = new RegExp(searchVal, "i");
                            if (regExp.test($(td).text())) {
                                found = true;
                                return false;
                            }
                        });
                        if (found === true) {
                            $(row).removeClass('hide');
                        } else {
                            $(row).addClass('hide');
                        }
                    }
                });
            }
        });
    }
}

CSS:

tr.hide {
    display: none;
}

Sidenote:

• ID应该是唯一的，尽量避免给不同的元素相同的ID。