jquery - 使用/jQuery 从 HTML 表中过滤大量数据

Question

我在一家交通机构工作，拥有大量数据(大部分是多次)，我需要一种使用两个文本框(“收件人”和“发件人”)来过滤数据的方法。

我发现了 jQuery 快速搜索，但它似乎只适用于一个文本框。

如果有人通过 jQuery 或其他客户端库有任何想法，那就太棒了。

理想的例子:

收件人:[文本框] 发件人:[文本框]

<table>
<tr>
<td>69th street</td><td>5:00pm</td><td>5:06pm</td><td>5:10pm</td><td>5:20pm</td>
</tr>
<tr>
<td>Millbourne</td><td>5:09pm</td><td>5:15pm</td><td>5:20pm</td><td>5:25pm</td>
</tr>
<tr>
<td>Spring Garden</td><td>6:00pm</td><td>6:15pm</td><td>6:20pm</td><td>6:25pm</td>
</tr>
</table>

我有一个 HTML 页面，上面有一个巨大的表格，列出了车站名称和每个车站的时间。我希望能够将起始位置放在一个框中，将结束位置放在另一个框中，并使表中与输入的两个位置都不相关的所有项目消失，只留下与内容匹配的两行被输入(即使他们拼写不正确或完全输入)类似于 jQuery 快速搜索插件

Answer 1

如果您想构建自己的，那么这是一种可能的实现:

// store values for later
$('#table-to-fiter tr').each(function() {
    var firstCellText = $('td:first', this).text().toLowerCase();
    $(this).data('firstCellText', firstCellText);
});

function refreshFilter() {

    var toValue = $('#to-input').val().toLowerCase(),
        fromValue = $('#from-input').val().toLowerCase(),
        firstCellText;

    $('#table-to-fiter tr').each(function() {
        firstCellText = $(this).data('firstCellText');
        if (firstCellText.indexOf(toValue) !== -1 || firstCellText.indexOf(fromValue) !== -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

}

$('#to-input, #from-input').keyup(refreshFilter);