Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2010, 13:25
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Динамическое сокрытие элементов таблицы
Имеем: таблицу, элементы <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>


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

Последний раз редактировалось Allan Stark, 04.05.2010 в 13:28.
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2010, 13:51
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

А с чего бы ему работать. Когда пользователь начинает вводить значение, выполняется sort_table() и все ячейки, не соответствующие введённому значению (т.е. все) удаляются.
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2010, 14:32
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

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

Интересно, а как теперь сделать так, чтобы динамически удалять лишние строки из таблицы (при visibility = "hidden" остается пустое место) ?
Вначале занести все элементы (вернее значения внутри <td>...</td>) в массив и затем отстраивать таблицу согласно него ?
Ответить с цитированием
  #4 (permalink)  
Старый 04.05.2010, 14:47
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

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

node.parentNode.removeChild(node);
Ответить с цитированием
  #5 (permalink)  
Старый 04.05.2010, 15:02
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Да, но тогда для ее восстановления потребуется перезагрузка документа.
А нужно, чтобы происходила фильтрация строк на основе введенных пользователем данных. Если в поле фильтра ничего нет (пустая строка или пробел) - должны отображаться все строки таблицы, а если что-то введено и текст совпадает с текстом в строках - чтобы отображались соотв. строки.
Ответить с цитированием
  #6 (permalink)  
Старый 04.05.2010, 15:06
Интересующийся
Отправить личное сообщение для Kfuse Посмотреть профиль Найти все сообщения от Kfuse
 
Регистрация: 08.11.2009
Сообщений: 28

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

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

Последний раз редактировалось Kfuse, 04.05.2010 в 15:10.
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2010, 11:45
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Сообщение от Kfuse Посмотреть сообщение
ну тогда добавьте что-нибудь типа
node_tr.style.position = "absolute";
И что это даст ?
Тогда нужно будет для каждой <tr> высчитывать ее положение относительно окна браузера, что не есть гуд, т.к. в моем случае вся таблица будет сидеть вв <div> с фиксированными размерами для обеспечения строки прокрутки справа.

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

Последний раз редактировалось Allan Stark, 20.05.2010 в 12:11.
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2010, 19:30
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

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>
Ответить с цитированием
  #9 (permalink)  
Старый 21.05.2010, 12:22
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

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

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

<!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, 21.05.2010 в 13:46.
Ответить с цитированием
  #10 (permalink)  
Старый 25.05.2010, 11:58
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Понял свою ошибку.
Вот листинг работающего примера (с исп. 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>

Последний раз редактировалось Allan Stark, 25.05.2010 в 12:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Динамическое изменение background-a в ячейках таблицы Gh0stik Events/DOM/Window 15 02.08.2012 19:40
динамическое обновление таблицы Алексашка AJAX и COMET 1 04.03.2010 12:53
ДИнамическое изминение таблицы Legi Элементы интерфейса 1 08.02.2009 04:10
Динамическое изменение границ между столбцами таблицы srgg Элементы интерфейса 3 10.08.2008 14:40