Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2012, 09:11
Новичок на форуме
Отправить личное сообщение для sigvart Посмотреть профиль Найти все сообщения от sigvart
 
Регистрация: 09.06.2012
Сообщений: 4

Фильтр таблицы с rowspan
Добрый день!
Есть таблица, в которой ячейки в определенных столбцах объединены. Нужно реализовать фильтр для столбцов. Не могу реализовать корректное скрытие строк, которые не удовлетворяют условиям поиска. Т.е. если в столбец с объединенными ячейками ввести значение, то часть таблицы сдвигается. Пробовал PicNet Table Filter, но там такая же бага.
<table width="700" cellspacing="0" border="1" id="MainContent_SRGV" >
  <tr>
	<th>ID</th>
	<th>Сущность</th>
	<th>Элемент</th>
	<th>Дата</th>
  </tr>
  <tr>
	<td><input type="text" name="" onchange="change(this,0,'SRGV',1)"></td>
	<td><input type="text" name="" onchange="change(this,1,'SRGV',1)"></td>
	<td><input type="text" name="" onchange="change(this,2,'SRGV',0)"></td>
	<td><input type="text" name="" onchange="change(this,3,'SRGV',1)"></td>
  </tr>
  <tr>
	<td rowspan="3" id="r2c0">1</td>
	<td rowspan="3" id="r2c1">Сущность 1</td>
	<td id="r2c2">Элемент 1.1</td>
	<td rowspan="3" id="r2c3">01.6.2012</td>
  </tr>
  <tr>
	<td id="r3c2">Элемент 1.2</td>
  </tr>
  <tr>
	<td id="r4c2">Элемент 1.3</td>
  </tr>
    <tr>
	<td rowspan="3" id="r5c0">2</td>
	<td rowspan="3" id="r5c1">Сущность 2</td>
	<td id="r5c2">Элемент 2.1</td>
	<td rowspan="3" id="r5c3">10.8.2012</td>
  </tr>
  <tr>
	<td id="r6c2">Элемент 2.2</td>
  </tr>
  <tr>
	<td id="r7c3">Элемент 2.3</td>
  </tr>

  </table>


Код яваскрипт (вместо скрытия строки стоит закраска ее цветом):
function change(textControl, i, tablename, rws) 
	{
		var TableForFilter = document.getElementById('MainContent_' + tablename);
		searchtext=textControl.value;
		searchtext=searchtext.toLowerCase()
		i_tmp=1;
		if (rws==1)
		{	
		//для колонки с rowspan
			for (var r = 2; r < TableForFilter.rows.length; r++) 
			{			
				temp_id=TableForFilter.rows[r].cells[i].id;	
				rs=TableForFilter.rows[r].cells[i].rowSpan;
				
				
				cellvalue=TableForFilter.rows[r].cells[i].innerHTML;
				cellvalue=cellvalue.toLowerCase()
				//сравниваем
				if (searchtext.length>0)
				{				
					pos = cellvalue.indexOf(searchtext);
					if (pos != -1)
					{
						TableForFilter.rows[r].cells[i].style.background="#3399cc";
						//TableForFilter.rows[r].cells[i].style.display="none";
					}	
					else
					{
						TableForFilter.rows[r].cells[i].style.background="white";
						//TableForFilter.rows[r].cells[i].style.display="block";
					}
				}
				else
				{
					TableForFilter.rows[r].cells[i].style.background="none";
					//TableForFilter.rows[r].cells[i].style.display="block";
				}
				if (rs>1)
				{
					r=r+rs-1;					
				}
			}
		}
		else
		{
		//для колонки без объединенных ячеек
		i_tmp=i;
			for (var r = 2; r < TableForFilter.rows.length; r++) 
			{							
				if (TableForFilter.rows[r].cells[0].rowSpan>1)
				{
					i=i_tmp;
				}
				else
				{
					i=0;
				}
				temp_id=TableForFilter.rows[r].cells[i].id;	
				rs=TableForFilter.rows[r].cells[i].rowSpan;
				cellvalue=TableForFilter.rows[r].cells[i].innerHTML;
				cellvalue=cellvalue.toLowerCase()
				//сравниваем
				if (searchtext.length>0)
				{				
					pos = cellvalue.indexOf(searchtext);
					if (pos != -1)
					{
						TableForFilter.rows[r].cells[i].style.background="#3399cc";
						//TableForFilter.rows[r].cells[i].style.display="none";
					}
					else
					{
						TableForFilter.rows[r].cells[i].style.background="white";
						//TableForFilter.rows[r].cells[i].style.display="block";
					}
				}
				else
				{
					TableForFilter.rows[r].cells[i].style.background="none";					
					//TableForFilter.rows[r].cells[i].style.display="block";
				}
				if (rs>1)
				{
					r=r+rs-1;					
				}
			}
		}
	}

Поиск ничего не дал. Может быть и есть решение, но я его не нашел. Буду благодарен за любую помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2012, 10:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

sigvart,
Можнo пару примеров поисковой строки ?

Мну кажецо если пробовать на jQuery - будет скрипт 8-9 строк
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2012, 10:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ксать еще
Оч простым и эффективным решением может оказаться замена в третьей колонке мелкоячеек во встроенную таблицу с border-collapse:collapse; высотой в соседнюю ячейку, независимо от колва ячеек в самой встроенной табличке: обведено синим
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2012, 11:07
Новичок на форуме
Отправить личное сообщение для sigvart Посмотреть профиль Найти все сообщения от sigvart
 
Регистрация: 09.06.2012
Сообщений: 4

Пример: в столбце сущность в поле фильтра вводим "сущность 1" и получается бред (если включить скрытие строк)
jQuery - к сожаление практически не знаком с ним, но, мне кажется, проблема останется
Цитата:
Оч простым и эффективным решением может оказаться замена в третьей колонке мелкоячеек во встроенную таблицу...
хорошая мысль, попробую.
Ответить с цитированием
  #5 (permalink)  
Старый 09.06.2012, 11:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от sigvart
Пример: в столбце сущность в поле фильтра вводим "сущность 1" и получается бред (если включить скрытие строк)

На jQuery заменить значение rowspan у каждой ячейки строки -
строчка кода
Ответить с цитированием
  #6 (permalink)  
Старый 09.06.2012, 11:44
Новичок на форуме
Отправить личное сообщение для sigvart Посмотреть профиль Найти все сообщения от sigvart
 
Регистрация: 09.06.2012
Сообщений: 4

Так проблема в том, что если убрать значение rowspan (т.е. сделать его равному 1), то ячейки из следующего столбца смещаются (например ячейки "Сущность 1" сейчас rowspan=3. Сделать rowspan=1 b получаем в столбце сущность значения: "Сущность 1", "Элемент 1.2", "Элемент 1.3")
Была мысль перед фильтром убирать rowspan, а потом его вешать, но столкнулся с еще большей проблемой.
Уже второй день бьюсь с этим =(

То, что на jquery будет меньше кода я понимаю, но для начала хочу добиться функционала на одном javascript
Ответить с цитированием
  #7 (permalink)  
Старый 09.06.2012, 11:51
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

sigvart,
Сообщение от sigvart
то ячейки из следующего столбца смещаются (например ячейки "Сущность 1" сейчас rowspan=3. Сделать rowspan=1 b получаем в столбце сущность значения: "Сущность 1", "Элемент 1.2", "Элемент 1.3")
Хм - Вродь такого со встроенной таблой в третью колонку - проблем быть не должно ?
Тем паче там убираете по строкам...
и rowspan в главной табле вообще исчезнут...
Ответить с цитированием
  #8 (permalink)  
Старый 09.06.2012, 16:59
Новичок на форуме
Отправить личное сообщение для sigvart Посмотреть профиль Найти все сообщения от sigvart
 
Регистрация: 09.06.2012
Сообщений: 4

Сообщение от Deff Посмотреть сообщение
sigvart,

Хм - Вродь такого со встроенной таблой в третью колонку - проблем быть не должно ?
Тем паче там убираете по строкам...
и rowspan в главной табле вообще исчезнут...
да, видимо это единственный вариант.
Спасибо за идею!
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Подсветка столбцов таблицы ctocopok Элементы интерфейса 31 14.06.2011 01:42
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
смена фоновой картинки у таблицы cuberboy Общие вопросы Javascript 0 15.10.2009 23:06
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35