table 行的显示与隐藏

//将代码直接拷贝到新建的html文件中运行就可以看到效果；

<script language="javascript">
function toggle( targetId ) {
if (document.getElementById){
 target = document.getElementById( targetId );
  if ( target.style.display == "none") {
   target.style.display = "";
  } else {
   target.style.display = "none";
  }
 }
}
</script>

  <table width="370" style="border-collapse: separate" border="1" align="center" bordercolorlight="#E0A461" bordercolordark="#FFE3AA" cellspacing="1">
                <tr>
                  <th height="27" background="" width="196" colspan="2">
     rrrr                                                           
                  <th width="158" height="27" background="" style="margin-right: 20">
     ppppp</th>
                </tr>
                <tr>
                  <td height="26" colspan="3" class="td1" background="" width="360"><p align="left">
     <strong>table的显示与隐藏</strong></td>
                </tr>
      
                <tr>
                  <td width="196" class="td1" height="29" colspan="2" bgcolor="#FFF7E7"><p align="left">
     &nbsp;<img src="" STYLE="CURSOR:hand"  width="23" height="25" &111nclick="toggle('aaa$id');toggle('www$id');">
                    <a href="">点我</a>&nbsp;</p></td>  
                  <td class="td1" height="29" width="158" align="right" bgcolor="#FFF7E7" style="margin-right: 20">&nbsp;&nbsp;&nbsp;
     iiiiiiiiiiiiiii</td>
                </tr>
                <tr id="aaa$id" style="display:none">
                  <td class="td5" align="right" height="54" width="20" rowspan="2" bgcolor="#FFF7E7">
                  &nbsp;
                  </td>
                  <td  class="td5" align="right" height="29" width="170" bgcolor="#FFF7E7">
                    <p align="left">pppppp                           
                  </td>
                  <td class="td5" align="right" height="29" bgcolor="#FFF7E7" width="158" style="margin-right: 20">
                    <p align="right">tlllllllll 
                  </td>
                </tr>
                <tr id="www$id" style="display:none">
                  <td  class="td5" align="right" height="29" width="170" bgcolor="#FFF7E7">
                    <p align="left">99999999
                  </td>
                  <td class="td5" align="right" height="29" bgcolor="#FFF7E7" width="158" style="margin-right: 20">
                    <p align="right">hhhhhhhhhhhhh  
                  </td>
                </tr>
               
               
               
                          <tr>
                  <td width="196" class="td1" height="29" colspan="2" bgcolor="#FFF7E7"><p align="left">
     &nbsp;<img src="" STYLE="CURSOR:hand"  width="23" height="25" &111nclick="toggle('nnn$id');toggle('mmm$id');">
                    <a href="">点他</a>&nbsp;</p></td>  
                  <td class="td1" height="29" width="158" align="right" bgcolor="#FFF7E7" style="margin-right: 20">&nbsp;&nbsp;&nbsp;
     iiiiiiiiiiiiiii</td>
                </tr>
                <tr id="nnn$id" style="display:none">
                  <td class="td5" align="right" height="54" width="20" rowspan="2" bgcolor="#FFF7E7">
                  &nbsp;
                  </td>
                  <td  class="td5" align="right" height="29" width="170" bgcolor="#FFF7E7">
                    <p align="left">pppppp                           
                  </td>
                  <td class="td5" align="right" height="29" bgcolor="#FFF7E7" width="158" style="margin-right: 20">
                    <p align="right">tlllllllll 
                  </td>
                </tr>
                <tr id="mmm$id" style="display:none">
                  <td  class="td5" align="right" height="29" width="170" bgcolor="#FFF7E7">
                    <p align="left">99999999
                  </td>
                  <td class="td5" align="right" height="29" bgcolor="#FFF7E7" width="158" style="margin-right: 20">
                    <p align="right">hhhhhhhhhhhhh  
                  </td>
                </tr>
 </table>