Question

我在屏幕上填充了一个html表。我编写了一段工作代码来使用列上的逗号分隔字符串过滤表。对于例如 - 列名= ID，我给出的示例过滤字符串= 1,2,3,4,6,8,9,90。因此它只显示具有这些ID的行。我的JS代码如下 -

form.as_table

现在我想启用ID`s的部分搜索，这意味着，例如，当我键入23,45,78,4324,5436,321321时，该表也应该开始过滤部分匹配。如何实施？

Answer 1

首先，你需要移除额外的空格，然后split(",")和JQuery选择器[attribute*=”value”]就像$("#my-table tr[data-id*='" + v + "']")一样选择所有行data-id＆＃39; value具有任何搜索输入ID，请尝试以下示例：

＆＃13;

$(function () {

    $("#filter").click(function () {
        try {
            ids = $("#inputFilter").val();
            if (ids != "") {
                idsArray = ids.replace(/[\n\r\t]/g,"").replace(/\s+/g,"").split(",");
                $("#my-table tr:gt(0)").hide();

            $.each(idsArray, function (i, v) {
             $("#my-table tr[data-id*='" + v + "']").show();
                })
            } else {
                $("#my-table tr").show();
            }
        }
        catch (error) {
            try {
                $body.removeClass("loading");
            }
            catch (error) {
            }
            alert(error);
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputFilter'>
<button id='filter'>filter</button>

<table id='my-table'>
<tr><th>ID</th><th>Name</th></tr>
<tr data-id="1"><td>1</td><td>Tom 1</td></tr>
<tr data-id="2"><td>2</td><td>John 1</td></tr>
<tr data-id="3"><td>3</td><td>Van 1</td></tr>
<tr data-id="10"><td>10</td><td>Tom 10</td></tr>
<tr data-id="20"><td>20</td><td>John 20</td></tr>
<tr data-id="30"><td>30</td><td>Van 30</td></tr>
<tr data-id="101"><td>101</td><td>Tom 101</td></tr>
<tr data-id="202"><td>202</td><td>John 202</td></tr>
<tr data-id="303"><td>303</td><td>Van 303</td></tr>
</table>

＆＃13;

Answer 2

您可以使用.filter(fn)

$(function () {
    $("#filter").click(function () {
        try {
            ids = $("#inputFilter").val();
            if (ids != "") {
                idsArray = ids.split(",");
                $("#my-table tr:gt(0)").hide();
                $.each(idsArray, function (i, v) {
                    $("#my-table tr").filter(function(){
                        //do your filtering, this is an example
                        //and use contains
                        return this.dataset.id.contains(v);
                    }).show();
                })
            } else {
                $("#my-table tr").show();
            }
        }
        catch (error) {
            try {
                $body.removeClass("loading");
            }
            catch (error) {
            }
            alert(error);
        }
    });
});

你也可以使用css selector [attribute~="value"]

$("#my-table tr[data-id~=" + v + "]").show();

启用部分匹配搜索html表的列

2 个答案: