通过JS控制展开或隐藏一个TABLE

1.通过点击文字展开或隐藏某个TABLE

<table>

<tr class="tr">
    <td  colspan="3" nowrap="true" align=center>
     <a id="otherinfoclick" onClick="showOtherInfo();" style="cursor:pointer;"><font color="blue">&nbsp;▼ 显示【序言尾言信息】</font></a>
     <input type="hidden" name="open" value="1">
     
     
    </td>
    <td colspan="3" align="left">
    <input type="hidden" name="openrecording" value="1">
     <a id="otherinfoclickdetail" onClick="showRecordingInfo();" style="cursor:pointer;"><font color="blue">&nbsp;▼ 显示【录音信息】</font></a>
    </td>
   </tr>

</table>

2.要显示或隐藏的table

<table  border='0' cellpadding='4'  align="center" style="width:479px" cellspacing='1' id="otherinfo1" name="otherinfo1" style="display:none" bgColor="6D89AC">
    <tr class="tr">
     <td class="tdtextred">
     序言:<input name="editBeginContent" type="button" class="tbbutton" style="width:120px"  value="编辑序言" onclick="editContent('${thisForm.ID}','BeginContent','RecordingNew')">
     </td>
     
     
    </tr>
    <tr class="tr">
     <td class='td'>
      ${thisForm.beginContent }
     </td>
     
     
    </tr>
    
    
   </table>
   <table  border='0' cellpadding='4'  align="center" style="width:479px" cellspacing='1' id="otherinfo2" name="otherinfo2" style="display:none" bgColor="6D89AC">
    <tr class="tr">
     <td class="tdtextred">
     尾言:<input name="editEndContent" type="button" class="tbbutton" style="width:120px"  value="编辑尾言" onclick="editContent('${thisForm.ID}','EndContent','RecordingNew')">
     </td>
     
     
    </tr>
    <tr class="tr">
     <td class='td'>
      ${thisForm.endContent }
     </td>
    </tr>
    
   </table>

3.控制函数

function showOtherInfo(){

  var open = document.thisForm.open.value;
  if( open == 0 ){
   document.getElementById("otherinfo1").style.display = "none";
   document.getElementById("otherinfo2").style.display = "none";
   document.getElementById("otherinfoclick").innerHTML = "&nbsp;▼ 显示【序言尾言信息】";
   document.thisForm.open.value = 1;
   
  }else{
   document.getElementById("otherinfo1").style.display = "";
   document.getElementById("otherinfo2").style.display = "";
   document.getElementById("otherinfoclick").innerHTML = "&nbsp;▲ 隐藏【序言尾言信息】";
   document.thisForm.open.value = 0; 
  }
  document.getElementById("otherinfoclick").style.color="blue";
 }
 function showRecordingInfo(){

  var open = document.thisForm.openrecording.value;
  if( open == 0 ){
   document.getElementById("otherinfo3").style.display = "none";
   
   document.getElementById("otherinfoclickdetail").innerHTML = "&nbsp;▼ 显示【录音信息】";
   document.thisForm.openrecording.value = 1;
   
  }else{
   document.getElementById("otherinfo3").style.display = "";
  
   document.getElementById("otherinfoclickdetail").innerHTML = "&nbsp;▲ 隐藏【录音信息】";
   document.thisForm.openrecording.value = 0; 
  }
  document.getElementById("otherinfoclickdetail").style.color="blue";
 }