在可见元素上过滤/搜索表格html

Question

我正在尝试过滤表的内容。 没关系，而且可以正常工作。

但是，我有“ display：none”元素隐藏在屏幕上，当我进行过滤时，它们也会出现。

下面，我以示例代码为例进行说明。 如何只过滤屏幕上可见的元素？

代码如下：

=

((document => {
    const LightTableFilter = ((Arr => {
		let _input;
		function _onInputEvent(e) {
			_input = e.target;
			const tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Arr.forEach.call(tables, table => {
				Arr.forEach.call(table.tBodies, tbody => {
					Arr.forEach.call(tbody.rows, _filter);
				});
			});
		}

		function _filter(row) {
            const text = row.textContent.toLowerCase();
            const val = _input.value.toLowerCase();
            row.style.display = !text.includes(val) ? 'none' : 'table-row';
        }

		return {
			init() {
				const inputs = document.getElementsByClassName('light-table-filter');
				Arr.forEach.call(inputs, input => {
					input.oninput = _onInputEvent;
				});
			}
		};
	}))(Array.prototype);
    document.addEventListener('readystatechange', () => {
		if (document.readyState === 'complete') {
			LightTableFilter.init();
		}
	});
}))(document);

Answer 1

尝试

function _filter(row) {
      //if (row.style.display === 'none') return; // optional
      const text = row.textContent.toLowerCase();
      const val = _input.value.toLowerCase();
      !text.includes(val) ? row.classList.add('hidden') : row.classList.remove('hidden');
    }

css

.hidden {
  display: none;
}