Java腳本查詢如何在單擊時過濾表

Question

我有一個表格，其中包含五個用於過濾器的輸入文本，如此jsfiddle中所示

https://jsfiddle.net/607y6qdx/2/

每當這些過濾器之一中有文本並且用戶單擊enter時，我都希望過濾表中的信息。

我已經模擬了輸入單擊，如下所示：

$(document).ready(function () {
    $('#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter ')
        .keypress(function (e) {
            var key = e.which;
            if (key == 13) // the enter key code
            {
                alert('Oh boy');
                return false;
            }
        });
});

但我無法過濾行。

請問你能幫幫我嗎。 我是JS新手

Answer 1

因此，您需要遵循的邏輯是

1. 獲取輸入字段的值，並獲取用戶按下Enter鍵的輸入字段的索引。
2. 遍歷所有
3. 從第一步中獲取的索引中選擇td。
4. 如果所提取的td中存在鍵入的值，則顯示整個行，否則隱藏整個行。

以下代碼可能會有所幫助：

$(
        '#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter')
        .keypress(function (e) {
        var key = e.which;
        if (key == 13) // the enter key code
        {
            $val = $(this).val();
            $el = $(this).closest("td");
            var index = $("td").index($el);
            $("tr").not(".fixed").each(function () {
                $elinner = $(this).find("td").eq(index);
                if ($elinner.html().indexOf($val) != -1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            return false;
        }
    });

https://jsfiddle.net/607y6qdx/7/