Javascript 对 keyup 进行过滤

Question

这是我现在的 HTML table:

<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

在您的情况下，您需要做的就是将使用 id 更改为类。

<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

我正在使用 class .form-control 获取所有输入并将它们传递给函数。然后检查输入是否有值，如果没有则不予考虑。对于每个输入，只搜索相同的列索引（例如，对于 id，我只用 index=0 过滤 td 等等。对于每个不匹配值的输入行，都会给出一个 class hide 具有 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;
}

旁注：

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

Javascript 对 keyup 进行过滤

Javascript filtering on keyup

javascript

filtering

filter