Question

我有一个n行m列的表格。我的目标是放置多个过滤盒，以便我可以在单独的过滤框中过滤多个列。我有这样的JavaScript：

function (document) {
    'use strict';
        var MyTableFilter = (function (Arr) {
            var _input;
            function _onInputEvent(e) {
                _input = e.target;
                var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
                Arr.forEach.call(tables, function (table) {
                    Arr.forEach.call(table.tBodies, function (tbody) {
                        Arr.forEach.call(tbody.rows, _filter);
                    });
                });
            }
            function _filter(row) {    
                var input0Value = document.getElementById('input0').value;
                var input1Value = document.getElementById('input1').value;
                var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
                var tdsArray = row.children;
                var td0Content = tdsArray[0].textContent;
                var td1Content = tdsArray[1].textContent;
                function isDisplayRow() {
                    return td0Content.indexOf(input0Value) !== -1 &&
                            td1Content.indexOf(input1Value) !== -1
                }
                row.style.display = isDisplayRow() ? 'table-row' : 'none';
            }
            return {
                init: function () {
                    var inputs = document.getElementsByClassName('my-table-filter');
                    Arr.forEach.call(inputs, function (input) {
                        input.oninput = _onInputEvent;
                    });
                }
            };
        })(Array.prototype);

        document.addEventListener('readystatechange', function () {
            if (document.readyState === 'complete') {
                MyTableFilter.init();
            }
        });

  })(document);

我输入id / class的形式如下：

<input type="search" id="input0" class="my-table-filter" data-table="order-table" placeholder="Firstname"/>
<input type="search" id="input1" class="my-table-filter" data-table="order-table" placeholder="Lastname"/>

但是，当我运行程序时，结果不是我所期望的。例如，我有约翰史密斯，亨利威尔斯在桌子上。如果我输入＆＃39; H＆＃39;在名字搜索框和＆＃39; S＆＃39;在姓氏搜索框中，我应该只得到约翰·史密斯＆＃39;。但是，我得到的是亨利威尔斯＆＃39;因为＆＃39; HENRY＆＃39;已经＆＃39; N＆＃39;和＆＃39; WILLS＆＃39;已经＆＃39; S＆＃39;如果我输入＆＃39; JOHN SMITH＆＃39;的整个单词，它就可以了。

另外，如何关闭输入文本的区分大小写？我是JavaScript的新手。任何建议将不胜感激！

Answer 1

问题来自您的过滤器功能，它执行子字符串搜索。您可以轻松地将其修改为前缀搜索：

function isDisplayRow() {
    return td0Content.indexOf(input0Value) === 0 &&
        td1Content.indexOf(input1Value) === 0
}

Answer 2

如果您只想从字符串的开头搜索你将改变indexOf改为 String.prototype.startsWith 要么 td0Content.substring（0，input0Value.length）=== input0Value

JavaScript过滤每个表列的单元格

2 个答案: