В ХЕД
Code
<script language="javascript">
//функция прячет определенную строку
function hideRow(control)
{
control.parentElement.style.display=(control.parentElement.style.display==""?"none":"");
}
//функция показывает все строки
function showAllRow(control)
{
for(var i=0;control.rows.length; i++)
{
control.rows[i].style.display = "";
}
}
//функция по выбору действия
function tableHandler(table)
{
var control = event.srcElement;
switch(control.id)
{
case "showRowContol":
showAllRow(table);
break;
case "hideRowContol":
hideRow(control);
break;
}
}
</script>
В БОДИ
Code
<table border="1" width="50%" onclick="tableHandler(this)">
<tr>
<td width="100%" colspan="2" id="showRowContol" style="cursor:hand;color:#00ff00" title="Показать строки">
v
</td>
</tr>
<tr>
<td width="100%">
Первая
</td>
<td id="hideRowContol" style="cursor:hand;color:#ff0000" title="Скрыть строку">
x
</td>
</tr>
<ttr>
<td width="100%">
Вторая
</td>
<td id="hideRowContol" style="cursor:hand;color:#ff0000" title="Скрыть строку">
x
</td>
</tr>
<tr>
<td width="100%">
Третья
</td>
<td id="hideRowContol" style="cursor:hand;color:#ff0000" title="Скрыть строку">
x
</td>
</tr>
<tr>
<td width="100%">
Четвертая
</td>
<td id="hideRowContol" style="cursor:hand;color:#ff0000" title="Скрыть строку">
x
</td>
</tr>
<tr>
<td width="100%">
Пятая
</td>
<td id="hideRowContol" style="cursor:hand;color:#ff0000" title="Скрыть строку">
x
</td>
</tr>
</table>
