Javascript.RU

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

Отображение определенных элементов таблицы при нажатии на radio
Доброго времени суток.

Суть: необходимо создать интерактивную таблицу. В левой части таблицы блок с параметрами (input radio), в правой - таблица со скрытыми ячейками (style: "display:none")
Необходимо:
При выборе определенного radio показывать определённые ячейки таблицы, при этом важно, чтобы при смене radio показывались уже другие ячейки, а остальные скрывались.

Пример кода:
<!DOCTYPE html>
<html>
<head>
<meta  content="text/html; charset=UTF-8"  http-equiv="content-type">
<title>Пример интерактивной процедуры</title>

<script language="JavaScript" type="text/javascript">


function show(id){document.getElementById(id).style.display="block";}

function instruction ()
{
	if (f.param[0].checked)
		{	
			show("step_1");
			show("step_3");
			show("step_5");			
		}
	else if (f.param[1].checked)
		{			
			show("step_2");
			show("step_4");
			show("step_6");			
		}	
}

</script>
</head>
<body>
<form name="f">
<table width="100%">
<tr>
<td colspan="2">Заголовок процедуры </td>
</tr>	
<tr>
<td width="40%">
<table id="params">
<tr>
	<td id="param_1" onClick="instruction ();">
	<input type="radio" name="param" />параметр 1
	</td>
</tr>	
<tr>
	<td id="param_2" onClick="instruction ();">
	<input type="radio" name="param" />параметр 2	
	</td>
</tr>
</table>	
</td>	
<td width="60%">
<table  style="display: ">
<tr id="step_1" style="display: none">
<td>Шаг_1</td>	
</tr>
<tr id="step_2" style="display: none">
<td>Шаг_2</td>	
</tr>
<tr id="step_3" style="display: none">
<td>Шаг_3</td>	
</tr>
<tr id="step_4" style="display: none">
<td>Шаг_4</td>	
</tr>
<tr id="step_5" style="display: none">
<td>Шаг_5</td>	
</tr>
<tr id="step_6" style="display: none">
<td>Шаг_6</td>	
</tr>	
</table>	
</td>
</tr>	
</table>
</form>	
</body>
</html>


Имеющийся скрипт работает только в одном направлении: показывает элементы. Если пробежаться по всем radio получится каша (будут видны все элементы).
Понимаю, что нужно поменять логику функции show(id), но не хватает мозгов/знаний, как это сделать.

Прошу помощи.
Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2014, 13:53
Кандидат Javascript-наук
Отправить личное сообщение для jaroslav.tavgen Посмотреть профиль Найти все сообщения от jaroslav.tavgen
 
Регистрация: 18.09.2014
Сообщений: 128

<!DOCTYPE html>
<html>
<head>
<meta  content="text/html; charset=UTF-8"  http-equiv="content-type">
<title>Пример интерактивной процедуры</title>
<style>
.left, .right{
display:inline-block;
padding-right:100px;
}
#step_1, #step_2, #step_3, #step_4, #step_5, #step_6{
display:none;
}
</style>

<script language="JavaScript" type="text/javascript">


function show(id){document.getElementById('step_'+id).style.display="block";}
function hide(id){document.getElementById('step_'+id).style.display="none";}

function instruction (ind){
    if (ind==1) {
		document.getElementById('radio-1').checked = true;	
	    document.getElementById('radio-2').checked = false;	
		
	    for (var i=1;i<6;i=i+2){
		    show (i);
			hide(i+1);
		}		
	}
	else{
		document.getElementById('radio-1').checked = false;	
	    document.getElementById('radio-2').checked = true;	

	    for (var i=2;i<7;i=i+2){
		    show (i);
			hide(i-1);
		}			
	}
}
</script>
</head>
<body>
<span class="left">
<div>Заголовок процедуры</div>
<div>
	<input type="radio" id="radio-1"  onClick="instruction (1)" />Параметр 1
</div>
<div>
	<input type="radio" id="radio-2" onClick="instruction (2)" />Параметр 2	
</div>
</span>
<span class="right">
<div id="step_1">Шаг_1</div>
<div id="step_2">Шаг_2</div>
<div id="step_3">Шаг_3</div>
<div id="step_4">Шаг_4</div>	
<div id="step_5">Шаг_5</div>
<div id="step_6">Шаг_6</div>	
</span>
</body>
</html>

Последний раз редактировалось jaroslav.tavgen, 04.12.2014 в 14:31.
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2014, 18:05
Новичок на форуме
Отправить личное сообщение для Kichiro Посмотреть профиль Найти все сообщения от Kichiro
 
Регистрация: 03.12.2014
Сообщений: 2

То, что нужно. Спасибо большое.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как средствами Ajax при нажатии на кнопку (ссылку) открывать окно, в котором будет ин Sergo jQuery 3 13.03.2014 10:17
Отображение фото при наведении OnOff jQuery 2 11.04.2012 16:18
Получение данных строки грида при нажатии сторонней кнопки Allan Stark ExtJS 4 17.11.2011 19:21
Отображение ссылок при нажатии на картинку deNSe_01 Events/DOM/Window 5 27.06.2011 10:39
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14