Доброго времени суток.
Суть: необходимо создать интерактивную таблицу. В левой части таблицы блок с параметрами (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), но не хватает мозгов/знаний, как это сделать.
Прошу помощи.
Заранее благодарен.