显示隐藏的表，直到搜索按钮单击

Show hidden tables until search button clicked

本文关键字：搜索 按钮 单击 隐藏 显示      更新时间：2023-09-26

我有一个搜索框，它在一个表中发出请求并显示查询的结果。

我希望表保持隐藏，直到用户开始搜索。

<section class="container">

<input type="search" class="table-filter" data-table="order-table" placeholder="Filter" >
<table class="order-table table">
    <tbody>
        <tr>
            <td>John</td>
            <td>john.doe</td>
        </tr>
        <tr>
            <td>Jane Vanda</td>
            <td>jane@vanda</td>
        </tr>
        <tr>
            <td>Alferd Penyworth</td>
            <td>alfred</td>
        </tr>
    </tbody>
</table>

JS 

(function(document) {
'use strict';
var TableFilter = (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('table-filter');
            Arr.forEach.call(inputs, function(input) {
                input.oninput = _onInputEvent;
            });
        }
    };
})(Array.prototype);
document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        TableFilter.init();
    }
});
})(document);

试一试

(function(document) {
    'use strict';
    var TableFilter = (function(Arr) {
        var _input;
        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                /* New code here */
                table.style.display = _input.value.length > 0 ? 'table' : 'none'; // Or inline maybe.
                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('table-filter');
                Arr.forEach.call(inputs, function(input) {
                    /* New code here */
                    var tables = document.getElementsByClassName(input.getAttribute('data-table'));
                    Arr.forEach.call(tables, function(table) {
                        table.style.display = 'none';
                    });
                    /* */
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);
    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            TableFilter.init();
        }
    });
})(document);
相关文章：