<table id="table1">
<tr>
<td><a href="#">主题一</a></td>
</tr>
<tr id="trSub1" style="display:none">
<td>主题一详细内容</td>
</tr>
<tr>
<td><a href="#">主题二</a></td>
</tr>
<tr id="trSub2" style="display:none">
<td>主题二详细内容</td>
</tr>
<tr>
<td><a href="#">主题三</a></td>
</tr>
<tr id="trSub3" style="display:none">
<td>主题三详细内容</td>
</tr>
</table>
如上面一段html,初始状态下只显示"主题一","主题二","主题三" 这三行, 要求:
1.点击"主题一"时,显示id="trSub1"这个tr. 再次点击则隐藏.
2.点击哪个主题,就显示哪个主题的详细内容,其它详细内容隐藏.
3.主题的数量是不定的,可能三个,也可能三十个.所以不能写死.
用javascript如何实现? 谢谢
<script>
var box = document.getElementById('table1').getElementsByTagName('a');
for(var i=1;i<box.length;i++){
box[i].onclick = functi
