页面中有一表格:
------------------------------------------------------------
¦id="r1" ¦
------------------------------------------------------------
¦ id="r1r2" ¦
------------------------------------------------------------
¦ id="r1r3" ¦
------------------------------------------------------------
想实现:当点击第一行(id=r1)时把下边的两行(id=r1r2,r1r3)隐藏,该怎么做?
---------------------------------------------------------------
在id=rl的地方加入onclick="rlr2.style.visibility='hidden';rlr3.style.visibility='hidden'"
---------------------------------------------------------------
1<table border="">
2<tr id="r1" onclick='r2.style.display=r3.style.display="none";'><td>id="r1"</td>
3<tr id="r2"><td>id="r2"</td>
4<tr id="r3"><td>id="r3"</td>
5</tr></tr></tr></table>
---------------------------------------------------------------
sample: works in IE5+
1<script language="JavaScript">
2<!--
3function showhide()
4{
5if(r1.style.display=="none"){
6r1.style.display="block";
7r2.style.display="block";
8}
9else{
10r1.style.display="none";
11r2.style.display="none";
12}
13}
14//-->
15</script>
1<table border="1">
2<tr onclick="showhide()">
3<td>34</td>
4<td>56</td>
5</tr>
6<tr id="r1">
7<td>12</td>
8<td>454</td>
9</tr>
10<tr id="r2">
11<td>34</td>
12<td>3446</td>
13</tr>
14</table>
---------------------------------------------------------------
假设表格id为tblTest。在第一行的onclick事件中加入下面代码:
with (tblTest)
{
for (var i=1;i
1<rows.length;i++) (rosw(i).style.display="none" (rows(i).id.substr(0,2)="rl" )="" ;="" <script="" \---------------------------------------------------------------="" else="" if="" rosw(i).style.display="none" {="" }="">
2function hid(){
3var tb = document.all.tb ;
4for (var i=0;i<tb.rows.length;i++){ (tb.rows[i].id.indexof("r1")="0)" ;="" <="" if="" script="" tb.rows[i].style.display="none" }="">
5<table border="" id="tb">
6<tr id="r" onclick="hid()"><td>id="r"</td>
7<tr id="r1r2"><td>id="r1r2"</td>
8<tr id="rr1"><td>id="rr1"</td>
9<tr id="r1"><td>id="r1"</td>
10<tr id="r1r"><td>id="r1r"</td>
11<tr id="r3"><td>id="r3"</td>
12</tr></tr></tr></tr></tr></tr></table>
13
14\---------------------------------------------------------------
15
16<table border="">
17<tr id="r1" onclick="showhide(this.id)"><td>id="r1"</td>
18<tr id="r1r1"><td>id="r1r1"</td></tr>
19<tr id="r1r2"><td>id="r1r2"</td></tr>
20<tr id="r1r3"><td>id="r1r3"</td></tr>
21<tr id="r1r4"><td>id="r1r4"</td></tr>
22<tr id="r2" onclick="showhide(this.id)"><td>id="r2"</td>
23<tr id="r2r1"><td>id="r2r1"</td></tr>
24<tr id="r2r2"><td>id="r2r2"</td></tr>
25<tr id="r2r3"><td>id="r2r3"</td></tr>
26<tr id="r2r4"><td>id="r2r4"</td></tr>
27</tr></tr></table>
28<script>
29function showhide(obj)
30{
31var i=1;
32while(true){
33myrow = null;
34subobj=obj+"r"+i;
35str="typeof("+subobj+")=='undefined'";
36if(eval(str))
37break;
38else
39myrow = eval(subobj);
40if(myrow.style.display=="none"){
41myrow.style.display="block";
42}
43else{
44myrow.style.display="none";
45}
46i++;
47}
48}
49</script>
50注意的是:
51子菜单必须是从r1 开始的 ……</tb.rows.length;i++){></rows.length;i++)>