Фильтр / поиск в таблице html по видимым элементам - PullRequest
Новая
       4

Фильтр / поиск в таблице html по видимым элементам

0 голосов
/ 24 декабря 2018

Я пытаюсь отфильтровать содержимое таблицы.Это нормально и работает.

Но у меня есть элементы с «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);
<section class="container">
	<h2>es6 Javascript Table Filter</h2>
	<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
	<table class="order-table table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@gmail.com</td>
				<td>0123456789</td>
				<td>99</td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>jane@vanda.org</td>
				<td>9876543210</td>
				<td>349</td>
			</tr>
      <tr style="display: none">
				<td>!@#!@#!qawsed</td>
				<td>ewewewewew@batman.com</td>
				<td>6754328901</td>
				<td>199</td>
			</tr>
		</tbody>
	</table>
</section>

1 Ответ

0 голосов
/ 24 декабря 2018

попробуйте 

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;
}
...