怎么用javascript实现表格的折叠效果

Question

<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#CCCCCC">
    <th colspan="3" scope="col" onClick="ddd()">标题</th>
  </tr>
  <tr id="tr1">
    <td>&nbsp;FFFF</td>
    <td>&nbsp;EEEE</td>
    <td>&nbsp;DDDD</td>
  </tr>
  <tr id="tr2">
    <td>&nbsp;eeee</td>
    <td>&nbsp;rrrr</td>
    <td>&nbspwwww;</td>
  </tr>
</table>
<script>
function ddd(){
tr1.style.display=(tr1.style.display=="none"?"block":"none");
tr2.style.display=(tr2.style.display=="none"?"block":"none");
}
</script>

Answer 1

<table id="tab" width="200" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#CCCCCC">
    <th align="left" style="cursor:hand;" onclick="showOrHidden();">-</th>
<th colspan="3" scope="col">标题</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;FFFF</td>
    <td>&nbsp;EEEE</td>
    <td>&nbsp;DDDD</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;eeee</td>
    <td>&nbsp;rrrr</td>
    <td>&nbsp;wwww</td>
  </tr>
</table>
<script>
function showOrHidden(){
var table=document.getElementById("tab");
var rows=table.rows;
var str=rows[0].cells[0].firstChild.data;
if(str=="-"){
rows[0].cells[0].firstChild.data="+";
setRowStyle(rows,"none");
}else{
rows[0].cells[0].firstChild.data="-";
setRowStyle(rows,"");
}
}
function setRowStyle(rows,style){
for(var i=1;i<rows.length;i++){
rows[i].style.display=style;
}
}
</script>