Всем добрый день, мне нужно сделать выпадающие строки у таблицы следующим образом, чтобы по нажатию ссылки поля в таблице под ней выпадали строки относящиеся к данной ссылке полю.
Я написал что-то похожее но у меня открываются все подстроки полей, а нужно чтобы открывались только те которые соответствуют нажатому полю и соответственно с закрытием так же. Условия такие что количество подстрок для всех строк ссылок не обязательно должно быть одинаковое.
Привожу свой скрипт, подскажите пожалуйста в какую сторону думать и как это реализовать. Заранее благодарен тем кто откликнется и что-нибудь подскажет.
<html>
<head>
<meta charset="utf-8">
<title>My_page3</title>
<style>
.box{background-color: blue;}
.parent{ background-color: yellow;}
</style>
<script type="text/javascript">
function openbox(){
var disp = document.getElementsByClassName('box');
for(var i=0;i<disp.length;i++){
if(disp[i].style.display == "none"){
disp[i].style.display = "";
}
else{
disp[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<table name="table1" border="1">
<tr class="parent">
<td><a href="#" onclick="openbox();">Gold</a></td>
<td>121</td>
</tr>
<tr class="box" style="display: none;">
<td>NewGold</td>
<td>122</td>
</tr>
<tr class="box" style="display: none;">
<td>NewNewGold</td>
<td>000</td>
</tr>
<tr class="parent">
<td><a href="#" onclick="openbox();">Box</a></td>
<td>12</td>
</tr>
<tr class="box" style="display: none;">
<td>NewBox</td>
<td>13</td>
</tr>
<tr class="parent">
<td><a href="#" onclick="openbox();">Tools</a></td>
<td>10</td>
</tr>
<tr class="box" style="display: none;">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box" style="display: none;">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box" style="display: none;">
<td>NewNewTools</td>
<td>14</td>
</tr>
</table>
</body>
</html>