javascript - 如何编辑此表过滤器脚本以按选定列进行过滤？

Question

我正在使用这个脚本:

(function(document) {
    'use strict';

    var LightTableFilter = (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 text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

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

})(document);

和这个输入:

<input type="search" class="light-table-filter" data-table="order-table">

当我在过滤器输入中键入内容时，它会过滤一个表格，因此我只能看到其中与文本匹配的条目。像这样:http://codepen.io/chriscoyier/pen/tIuBL我如何编辑此脚本，使其不按整个表进行过滤，而只按某些选定的列进行过滤？就像我需要过滤的前三列一样。

Answer 1

我会添加数据属性来配置哪些列是可搜索的。例如 HTML 可能是这样的:

<input type="search" class="light-table-filter" 
       data-table="order-table" 
       data-table-columns="0,2" placeholder="Filter">

在上面的配置索引 0 和 2 中，“姓名”和“电话”列是可过滤的。

然后在 JS 部分你可以做这样的事情(只修改函数):

function _onInputEvent(e) {
    _input = e.target;
    var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
    var columns = (_input.getAttribute('data-table-columns') || '').split(',');
    Arr.forEach.call(tables, function (table) {
        Arr.forEach.call(table.tBodies, function (tbody) {
            Arr.forEach.call(tbody.rows, function (row) {
                _filter(row, columns);
            });
        });
    });
}

function _filter(row, columns) {
    var text, val = _input.value.toLowerCase();
    if (columns.length) {
        columns.forEach(function (index) {
            text += ' ' + row.cells[index].textContent.toLowerCase();
        });
    } else {
        text = row.textContent.toLowerCase();
    }
    row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}

演示: http://codepen.io/anon/pen/zxVagm