Скрытие/Раскрытие колонок таблицы путем подмены класса ячейки через Javascript

Avihr · July 30, 2010

Добрый день, пожалуйста, подскажите Новичку!

Задача.

Есть достаточно большая таблица, которая должна быть пригодна для ручного редактирования в Визивиг-редакторе системы CMS. При показе ее на сайте должна отображаться только самая левая колонка ПЛЮС еще одна колонка(группа колонок), зависящая от выбранного пользователем варианта.

Поискав на разных форумах нашел что-то подобное, что вроде бы должно работать одинаково в основных браузерах.

Адаптировал найденное под нашу задачу, проверяя работу под IE.

НО потом оказалось, что в Опере и FF скрипты работают, но несколько по другому.

ПОЧЕМУ - понять не могу.

Прошу помощи в исправлении ошибки.

Буду благодарен, если предложите идею и/или пример другой реализации данной задачи (например, через jQuery).

Во вложении HTML-файл с задействованными скриптами и примером, который прекрасно работает в IE8.

Реализовано через замену класса у ячеек таблицы. По классу в CSS определяется видимость/невидимость ячеек колонки.

При работе в Опере и FF скрипты отрабатывают, классы и видимость меняются, НО html-структура самой таблицы отрисовывается браузером по другому - видимые ячейки "вытягиваются" в одну колонку. В IE такого эффекта нет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru">
<head>
<title>ТЕСТ - Скрытие/Раскрытие колонок таблицы с помощью Javascript</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">

<style type="text/css">
.side  {background:#5ba; display:block}
td.on  {background:#5ba; display:block}
td.off {display:none}
</style>
</head>

<body>

<div>
<h2>Тест. Скрытие/Раскрытие колонок с помощью Javascript.</h2>
<p>
Нажмите на ссылку <b>Only</b> в разных колонках - Должна остаться самая левая <b>И</b> выбранная колонки, а остальные колонки должны скрыться.<br>
Нажмите на ссылку <b>All</b> - Все ранее скрытые колонки должны отобразиться.<br>
Текущая, т.е. ранее выбранная колонка, при этом отображается отличным от других колонок цветом, как и первая колонка.
</p>
</div>

<table id="pricetable" border="1" align="left" widht="40%">
	<tfoot>
		<tr align="center">

			<td class="side" align="left">Включить ОДНУ колонку</td>
			<td class="Cl_1">   <a href="#" onclick="activateThisColumn('Cl_1');return false;">Only</a></td>
			<td class="Cl_2">   <a href="#" onclick="activateThisColumn('Cl_2');return false;">Only</a></td>
			<td class="Cl_3">   <a href="#" onclick="activateThisColumn('Cl_3');return false;">Only</a></td>
			<td class="Cl_3">   <a href="#" onclick="activateThisColumn('Cl_3');return false;">Only</a></td>
			<td class="Cl_4">   <a href="#" onclick="activateThisColumn('Cl_4');return false;">Only</a></td>
			<td class="Cl_5">   <a href="#" onclick="activateThisColumn('Cl_5');return false;">Only</a></td>
			<td class="Cl_6">   <a href="#" onclick="activateThisColumn('Cl_6');return false;">Only</a></td>
			<td class="Cl_7">   <a href="#" onclick="activateThisColumn('Cl_7');return false;">Only</a></td>

		</tr>
		<tr align="center">

			<td class="side" align="left">Включить ВСЕ колонки</td>
			<td class="Cl_1">   <a href="#" onclick="displayAllColumn('Cl_1');return false;">All</a></td>
			<td class="Cl_2">   <a href="#" onclick="displayAllColumn('Cl_2');return false;">All</a></td>
			<td class="Cl_3">   <a href="#" onclick="displayAllColumn('Cl_3');return false;">All</a></td>
			<td class="Cl_3">   <a href="#" onclick="displayAllColumn('Cl_3');return false;">All</a></td>
			<td class="Cl_4">   <a href="#" onclick="displayAllColumn('Cl_4');return false;">All</a></td>
			<td class="Cl_5">   <a href="#" onclick="displayAllColumn('Cl_5');return false;">All</a></td>
			<td class="Cl_6">   <a href="#" onclick="displayAllColumn('Cl_6');return false;">All</a></td>
			<td class="Cl_7">   <a href="#" onclick="displayAllColumn('Cl_7');return false;">All</a></td>
		</tr>
	</tfoot>

	<tbody>
		<tr align="center">
			<td class="side">Ряд_1 Колонка_0</td>
			<td class="Cl_1">1-1</td>
			<td class="Cl_2">1-2</td>
			<td class="Cl_3">1-3a</td>
			<td class="Cl_3">1-3b</td>
			<td class="Cl_4">1-4</td>
			<td class="Cl_5">1-5</td>
			<td class="Cl_6">1-6</td>
			<td class="Cl_7">1-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_2 Колонка_0</td>
			<td class="Cl_1">2-1</td>
			<td class="Cl_2">2-2</td>
			<td class="Cl_3">2-3a</td>
			<td class="Cl_3">2-3b</td>
			<td class="Cl_4">2-4</td>
			<td class="Cl_5">2-5</td>
			<td class="Cl_6">2-6</td>
			<td class="Cl_7">2-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_3 Колонка_0</td>
			<td class="Cl_1">3-1</td>
			<td class="Cl_2">3-2</td>
			<td class="Cl_3">3-3a</td>
			<td class="Cl_3">3-3b</td>
			<td class="Cl_4">3-4</td>
			<td class="Cl_5">3-5</td>
			<td class="Cl_6">3-6</td>
			<td class="Cl_7">3-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_4 Колонка_0</td>
			<td class="Cl_1">4-1</td>
			<td class="Cl_2">4-2</td>
			<td class="Cl_3">4-3a</td>
			<td class="Cl_3">4-3b</td>
			<td class="Cl_4">4-4</td>
			<td class="Cl_5">4-5</td>
			<td class="Cl_6">4-6</td>
			<td class="Cl_7">4-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_5 Колонка_0</td>
			<td class="Cl_1">5-1</td>
			<td class="Cl_2">5-2</td>
			<td class="Cl_3">5-3a</td>
			<td class="Cl_3">5-3b</td>
			<td class="Cl_4">5-4</td>
			<td class="Cl_5">5-5</td>
			<td class="Cl_6">5-6</td>
			<td class="Cl_7">5-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_6 Колонка_0</td>
			<td class="Cl_1">6-1</td>
			<td class="Cl_2">6-2</td>
			<td class="Cl_3">6-3a</td>
			<td class="Cl_3">6-3b</td>
			<td class="Cl_4">6-4</td>
			<td class="Cl_5">6-5</td>
			<td class="Cl_6">6-6</td>
			<td class="Cl_7">6-7</td>
		</tr>
		<tr align="center">
			<td class="side">Ряд_7 Колонка_0</td>
			<td class="Cl_1">7-1</td>
			<td class="Cl_2">7-2</td>
			<td class="Cl_3">7-3a</td>
			<td class="Cl_3">7-3b</td>
			<td class="Cl_4">7-4</td>
			<td class="Cl_5">7-5</td>
			<td class="Cl_6">7-6</td>
			<td class="Cl_7">7-7</td>
		</tr>
	</tbody>
</table>

</body>


<script type="text/javascript">
/*
	For functions getElementsByClassName, addClassName, and removeClassName
	Copyright Robert Nyman, http://www.robertnyman.com
	Free to use if this text is included
*/
function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}

function addClassName(elm, className){
	var currentClass = elm.className;
	if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
		elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
	}
	return elm.className;
}

function removeClassName(elm, className){
	var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
	elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
	return elm.className;
}

function activateThisColumn(column) {
	var table = document.getElementById('pricetable');

	//remove the 'on' class from all other td's
	var tds = table.getElementsByTagName('td');
	for (var m=0; m<tds.length; m++) {
		removeClassName(tds[m], 'on');
		addClassName(tds[m], 'off');
	}

	//add the class 'on' to the selected td
	var newtds = getElementsByClassName(column, 'td', table);
	for (var i=0; i<newtds.length; i++) {
		removeClassName(newtds[i], 'off');
		addClassName(newtds[i], 'on');
	}
	//remove the class 'off' to the selected td
	var newtds = getElementsByClassName('side', 'td', table);
	for (var i=0; i<newtds.length; i++) {
		removeClassName(newtds[i], 'off');
	}
	for (var i=0; i<newtds.length; i++) {
		addClassName(newtds[i], 'on');
	}
}

function displayAllColumn(column) {
	var table = document.getElementById('pricetable');

	//remove the 'off' class from all other td's
	var tds = table.getElementsByTagName('td');
	for (var m=0; m<tds.length; m++) {
		removeClassName(tds[m], 'off');
	}

}

</script>
</html>

Great Rash · July 30, 2010

НО потом оказалось, что в Опере и FF скрипты работают, но несколько по другому.

Вы не описали как должно быть и как это "несколько по другому".

Буду благодарен, если предложите идею и/или пример другой реализации данной задачи (например, через jQuery).

Возможно вам подойдет фреймворк extJs?

Avihr · July 30, 2010

Вы не описали как должно быть и как это "несколько по другому".
Возможно вам подойдет фреймворк extJs?

Я специально выложил полный текст файла и достаточно детально описал назначение данного теста.

Мне кажется там ВСЁ понятно. Скопировав текст в файл и открыв его в браузере IE можно посмотреть, что/как работает в IE.

Потом, соответственно, сравнить в Опере или FF.

Если такой возможности нет, то дополнительно поясняю.

В IE при нажатии на сслыку Only у любой из колонок - таблица динамически перерисовывается и на экране остаются первая колонка таблицы и та колонка, в которой нажали на ссылку Only. Все остальные колонки скрываются. При последующем нажатии на ссылку All все скрытые колонки заново отображаются.

В Опере и FF колонки тоже скрываются, НО при этом происходит модификация структуры таблицы, при которой первая и выбранная колонки отображаются в ОДНОЙ колонке, в которой последовательно перемешаны значения ячеек из первой и выбранной колонки.

Почему так происходит я понять и не могу. Последующее отображение всех скрытых колонок (ссылка All) срабатывает "почти" нормально.

"Почти" - это тоже не понятное мне объединение ячеек в группе колонок (3а и 3б), помеченных одним классом Cl_3. При начальном выводе таблицы в Опере и FF такого объединения ячеек не наблюдается.

Что такое extJs сейчас посмотрю, вдруг там это решено не очень сложно, т.к. я не сильно большой специалист по JS :rolleyes:

Edited July 30, 2010 by Avihr

Great Rash · July 30, 2010

Просмотрел ваш код... ну естественно нифига работать не будет...

td.on  {background:#5ba; display:block}

Вы же задаете ячейке таблицы поведение блока (display: block;).

Нормальные браузеры делают именно то, что вы от них требуете - т.е. превращают ячейку в блок. Поэтому все "перемешивается"...

Тупой ИЕ не понимает такой записи, поэтому там все отображается по прежнему.

Учите матчасть короче.

«display» на htmlbоok.ru

Avihr · July 30, 2010

Просмотрел ваш код... ну естественно нифига работать не будет...
....
Учите матчасть короче.
«display» на htmlbоok.ru

Большое спасибо, помогло.

Так было в учебном примере, который я нашел и адаптировал. А т.к. не специализируюсь на JS и WEB-технологиях, то матчасть пока "не выучил"...

Еще раз спасибо.

Sign In

Скрытие/Раскрытие колонок таблицы путем подмены класса ячейки через Javascript

Question

Avihr

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Avihr

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Avihr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information