Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Динамическое сокрытие элементов таблицы (https://javascript.ru/forum/misc/9193-dinamicheskoe-sokrytie-ehlementov-tablicy.html)

Allan Stark 04.05.2010 13:25

Динамическое сокрытие элементов таблицы
 
Имеем: таблицу, элементы <td> которой содержат некоторый текст.
Задача: при динамическом вводе пользователя в поле ввода текстовой строки динамически скрывать те элементы <td> таблицы, содержимое которых НЕ соответствует полю ввода.

Тестовая страница с сценарием:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="JavaScript">
		function sort_table()
		{
			var counter = 1;
			if (document.test_form.filter.value != '')
			{
				while (counter <= 6)
				{
					var node_td = document.getElementById('td_' + counter);
					if (node_td.innerHTML != document.test_form.filter.value)
					{
						var node_tr = document.getElementById('tr_' + counter);
						node_tr.style.visibility = "hidden";
					}
					counter++;
				}
			}
		}
	</script>
</head>

<body>
<table width="100%" border="1">
	<tr id="tr_1"><td id="td_1">111</td></tr>
	<tr id="tr_2"><td id="td_2">222</td></tr>
	<tr id="tr_3"><td id="td_3">333</td></tr>
	<tr id="tr_4"><td id="td_4">444</td></tr>
	<tr id="tr_5"><td id="td_5">555</td></tr>
	<tr id="tr_6"><td id="td_6">123</td></tr>
</table>
<p>
<form name="test_form" method="get" action="#">
<input name="filter" type="Text" onkeypress="sort_table();">
</form>
</p>
</body>
</html>


Не работает :-(

exec 04.05.2010 13:51

А с чего бы ему работать. Когда пользователь начинает вводить значение, выполняется sort_table() и все ячейки, не соответствующие введённому значению (т.е. все) удаляются.

Allan Stark 04.05.2010 14:32

Таки да, не подумал.
Добавил в функцию по всем элементам ...visibility = "visible", действительно заработало, спасибо.

Интересно, а как теперь сделать так, чтобы динамически удалять лишние строки из таблицы (при visibility = "hidden" остается пустое место) ?
Вначале занести все элементы (вернее значения внутри <td>...</td>) в массив и затем отстраивать таблицу согласно него ?

exec 04.05.2010 14:47

Удаляйте строку из DOM вообще:

node.parentNode.removeChild(node);

Allan Stark 04.05.2010 15:02

Да, но тогда для ее восстановления потребуется перезагрузка документа.
А нужно, чтобы происходила фильтрация строк на основе введенных пользователем данных. Если в поле фильтра ничего нет (пустая строка или пробел) - должны отображаться все строки таблицы, а если что-то введено и текст совпадает с текстом в строках - чтобы отображались соотв. строки.

Kfuse 04.05.2010 15:06

ну тогда добавьте что-нибудь типа
node_tr.style.position = "absolute";

И лучше обрабатывать не onkeypress, a onkeyup.

Allan Stark 20.05.2010 11:45

Цитата:

Сообщение от Kfuse (Сообщение 54087)
ну тогда добавьте что-нибудь типа
node_tr.style.position = "absolute";

И что это даст ?
Тогда нужно будет для каждой <tr> высчитывать ее положение относительно окна браузера, что не есть гуд, т.к. в моем случае вся таблица будет сидеть вв <div> с фиксированными размерами для обеспечения строки прокрутки справа.

Вот что есть сейчас:

subzey 20.05.2010 19:30

display: none уже не рулит?
<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr style="display: none"><td>2-1</td><td>2-2</td></tr>
<tr><td>3-1</td><td>3-2</td></tr>
</table>

Allan Stark 21.05.2010 12:22

Сделал на массиве...
Но так конечно красивее да и Дэвид Флэнган тоже так рекомендует :-)

Но вот такой код не работает :-(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="JavaScript">
		function sort_table()
		{
			var counter = 1;
			if (document.test_form.filter.value != '')
			{
				while (counter <= 6)
				{
					var element = document.getElementById('td_' + counter);
					if (element.innerHTML != document.test_form.filter.value)
						element.parentNode.style.display = 'none';
			        counter++;
				}
			}
		}
	</script>
</head>

<body>
<table id ="test_table" width="100%" border="1">
	<tr id="tr_1"><td id="td_1">111</td></tr>
	<tr id="tr_2"><td id="td_2">222</td></tr>
	<tr id="tr_3"><td id="td_3">333</td></tr>
	<tr id="tr_4"><td id="td_4">444</td></tr>
	<tr id="tr_5"><td id="td_5">555</td></tr>
	<tr id="tr_6"><td id="td_6">123</td></tr>
</table>
<p>
<form name="test_form" method="get" action="#">
<input name="filter" type="Text" onkeyup="sort_table()" value="">
</form>
</p>
</body>
</html>

Allan Stark 25.05.2010 11:58

Понял свою ошибку.
Вот листинг работающего примера (с исп. RegExp):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="JavaScript">
		function sort_table()
		{
			var pattern_string = '';
			var counter = 1;
			if (document.test_form.filter.value != '')
				pattern_string = '^' + document.test_form.filter.value;
			while (counter <= 6)
			{
				var element = document.getElementById('td_' + counter);
				if ( (element.innerHTML.search(pattern_string) != -1) || (document.test_form.filter.value == '') )
					element.parentNode.style.display = '';
				else
					element.parentNode.style.display = 'none';
				counter++;
			}
		}
	</script>
</head>

<body>
<table id ="test_table" width="100%" border="1">
	<tr id="tr_1"><td id="td_1">111</td></tr>
	<tr id="tr_2"><td id="td_2">222</td></tr>
	<tr id="tr_3"><td id="td_3">333</td></tr>
	<tr id="tr_4"><td id="td_4">444</td></tr>
	<tr id="tr_5"><td id="td_5">555</td></tr>
	<tr id="tr_6"><td id="td_6">123</td></tr>
</table>
<p>
<form name="test_form" method="get" action="#">
<input name="filter" type="Text" onkeyup="sort_table()" value="">
</form>
</p>
</body>
</html>


Часовой пояс GMT +3, время: 18:56.