从< select>过滤表使用jQuery输入 [英] Filter table from <select> input using jQuery

问题描述

我正在尝试使用jQuery从字母< select> 输入过滤表格。

I'm trying to filter a table from an alphabetical <select> input with jQuery.

我在表的两列中有名字和姓氏，我想用其中任何一个过滤行。

I have first and last names in two columns of the table, and I'd like to filter the rows by either of these.

我有一个选择输入设置为所以：

I have a select input set up as so:

<select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    ...
</select>

我想过滤此表：

<tr>
    <td>Joe</td>
    <td>Schmoe</td>
    <td>$2482.79</td>
    <td>172.78.200.124</td>
    <td>http://gmail.com</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>$2776.09</td>
    <td>119.232.182.142</td>
    <td>http://www.example.com</td>
</tr>

我如何使用jQuery过滤表？

How would I go about filtering the table using jQuery?

推荐答案

假设你只有一个select和一个像你的例子一样被结构化的表，这将有效。

This will work assuming you only have one select and one table that is stuctured like your example

$(document).ready(function($) {
    var rows = $('table tr').each(function() {
        var row = $(this);
        var columns = row.children('td');

        row.data('name-chars', [
            columns.eq(0).html()[0].toUpperCase(),
            columns.eq(1).html()[0].toUpperCase(),
        ]);
    });

    $('select').change(function() {
        var char = $(this).val().toUpperCase();

        rows.each(function() {
            var row = $(this);
            var chars_to_match = row.data('name-chars');
            if($.inArray(char, chars_to_match) > -1) {
                row.show();
            }
            else {
                row.hide();
            }
        });
    });
});

这篇关于从< select>过滤表使用jQuery输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！