如何实现表格的伸缩？急！急！急！急！急！

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title><script language="javascript">
function DisplayReply(r1,r2) {
for(i=r1;i<=r2;i++)
t.rows[i].style.display=t.rows[i].style.display=='none'?'block':'none'
}
</script></head><body>
<table border="1" cellspacing="0" cellpadding="0" id=t>
  <tr>
          <td bgcolor="#66CCFF">名称</td>
          <td bgcolor="#66CCFF">一季度销售额</td>
　　　　　　<td bgcolor="#66CCFF">二季度销售额</td>
  </tr>
  <tr onclick="DisplayReply(2,6)">
          <td bgcolor="#66CCFF"><b>+</b>销售额合计</td>
          <td >123000</td>
　<td >570000</td>
  </tr>
  <tr style="display:block" onclick="DisplayReply(3,6)" id=trReply1>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>水果汇总数据</td>
          <td>500</td>
　<td>360</td>
  </tr>
  <tr style="display:block" id=trReply13>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>芒果</td>
          <td>300</td>
　<td>200</td>
  </tr>
  <tr style="display:block" id=trReply14>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>荔枝</td>
          <td>100</td>
　<td>60</td>
  </tr>
  <tr style="display:block" id=trReply15>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>苹果</td>
          <td>100</td>
　<td>100</td>
  </tr>
  <tr style="display:block" id=trReply19>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>水果n</td>
          <td>销售额n1</td>
　<td>销售额n2</td>
  </tr>  <tr onclick="DisplayReply(8,9)">
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>熟食汇总数据</td>
          <td>400</td>
　<td>320</td>
  </tr>
  <tr style="display:block" id=trReply16>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>方便面</td>
          <td>200</td>
　<td>200</td>
  </tr>
  <tr style="display:block" id=trReply17>
          <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>饼干</td>
          <td>200</td>
　<td>120</td>
  </tr></table>
</body>
</html>

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>表格显/隐</title><script language="javascript">
    function DisplayReply(obj)
    {
        var e = obj.nextSibling;
        display = (e.style.display=='none'?'block':'none');
        while (e)
        {
            if (e.Extand == obj.id)
            {
                if (e.onclick) e.onclick(e);
                e.style.display = display;
            }
            e = e.nextSibling;
        }
    }
    </script></head><body>
    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
              <td bgcolor="#66CCFF">名称</td>
              <td bgcolor="#66CCFF">一季度销售额</td>
    　　　　　　<td bgcolor="#66CCFF">二季度销售额</td>
      </tr>
      <tr onclick="DisplayReply(this)" id="node1">
              <td bgcolor="#66CCFF"><b>+</b>销售额合计</td>
              <td >123000</td>
    　<td >570000</td>
      </tr>
      <tr style="display:block" onclick="DisplayReply(this)" id="node2" Extand="node1">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>水果汇总数据</td>
              <td>500</td>
    　<td>360</td>
      </tr>
      <tr style="display:block" Extand="node2">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>芒果</td>
              <td>300</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" Extand="node2">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>荔枝</td>
              <td>100</td>
    　<td>60</td>
      </tr>
      <tr style="display:block" Extand="node2">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>苹果</td>
              <td>100</td>
    　<td>100</td>
      </tr>
      <tr style="display:block" Extand="node2">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>水果n</td>
              <td>销售额n1</td>
    　<td>销售额n2</td>
      </tr>  <tr onclick="DisplayReply(this)" id="node3" Extand="node1">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>熟食汇总数据</td>
              <td>400</td>
    　<td>320</td>
      </tr>
      <tr style="display:block" Extand="node3">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>方便面</td>
              <td>200</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" Extand="node3">
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>饼干</td>
              <td>200</td>
    　<td>120</td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    楼上的不大对,我再修改了一下
    完整的如下
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title><script language="javascript">
    function DisplayReply(r1,r2) {
    for(i=r1;i<=r2;i++)
    t.rows[i].style.display=t.rows[i].style.display=='block'?'none':'block'
    }
    function expandall(o) {
    if(o.opn=="true"){
    for(i=2;i<=9;i++)t.rows[i].style.display='none';o.opn="false"
    }
    else {for(i=2;i<=9;i++)t.rows[i].style.display='block';o.opn="true"}
    }
    </script></head><body>
    <table border="1" cellspacing="0" cellpadding="0" id=t>
      <tr>
              <td bgcolor="#66CCFF">名称</td>
              <td bgcolor="#66CCFF">一季度销售额</td>
    　　　　　　<td bgcolor="#66CCFF">二季度销售额</td>
      </tr>
      <tr onclick="expandall(this)" opn=true>
              <td bgcolor="#66CCFF"><b>+</b>销售额合计</td>
              <td >123000</td>
    　<td >570000</td>
      </tr>
      <tr style="display:block" onclick="DisplayReply(3,6)" id=trReply1>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>水果汇总数据</td>
              <td>500</td>
    　<td>360</td>
      </tr>
      <tr style="display:block" id=trReply13>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>芒果</td>
              <td>300</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" id=trReply14>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>荔枝</td>
              <td>100</td>
    　<td>60</td>
      </tr>
      <tr style="display:block" id=trReply15>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>苹果</td>
              <td>100</td>
    　<td>100</td>
      </tr>
      <tr style="display:block" id=trReply19>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>水果n</td>
              <td>销售额n1</td>
    　<td>销售额n2</td>
      </tr>  <tr style="display:block" onclick="DisplayReply(8,9)" >
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>熟食汇总数据</td>
              <td>400</td>
    　<td>320</td>
      </tr>
      <tr style="display:block" id=trReply16>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>方便面</td>
              <td>200</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" id=trReply17>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>饼干</td>
              <td>200</td>
    　<td>120</td>
      </tr></table>
    </body>
    </html>
      

  3.   

    还有没有办法在展开的时候把"+"变成"-",收缩时把"-"变成"+"?
    如果可以，那就完美了！！！！
    非常感谢 fason(【阿信(你是我的温柔)】)、 nhconch(海风轻拂)  ！！
      

  4.   

    很简单啊，判断一下那个row的display属性就行啦，如果是none就为：+
    否则为减
      

  5.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title><script language="javascript">
    function DisplayReply(o,r1,r2) {
    for(i=r1;i<=r2;i++)
    t.rows[i].style.display=t.rows[i].style.display=='block'?'none':'block'
    o.firstChild.children[0].innerText=o.firstChild.children[0].innerText=="+"?"-":"+"
    }
    function expandall(o) {
    o.firstChild.firstChild.innerText=o.firstChild.firstChild.innerText=="+"?"-":"+"
    if(o.opn=="true"){
    for(i=2;i<=9;i++)t.rows[i].style.display='none';o.opn="false"
    }
    else {for(i=2;i<=9;i++)t.rows[i].style.display='block';o.opn="true"}
    }
    </script></head><body>
    <table border="1" cellspacing="0" cellpadding="0" id=t>
      <tr>
              <td bgcolor="#66CCFF">名称</td>
              <td bgcolor="#66CCFF">一季度销售额</td>
    　　　　　　<td bgcolor="#66CCFF">二季度销售额</td>
      </tr>
      <tr onclick="expandall(this)" opn=true>
              <td bgcolor="#66CCFF"><b>+</b>销售额合计</td>
              <td >123000</td>
    　<td >570000</td>
      </tr>
      <tr style="display:block" onclick="DisplayReply(this,3,6)" id=trReply1>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>水果汇总数据</td>
              <td>500</td>
    　<td>360</td>
      </tr>
      <tr style="display:block" id=trReply13>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>芒果</td>
              <td>300</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" id=trReply14>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>荔枝</td>
              <td>100</td>
    　<td>60</td>
      </tr>
      <tr style="display:block" id=trReply15>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>苹果</td>
              <td>100</td>
    　<td>100</td>
      </tr>
      <tr style="display:block" id=trReply19>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>水果n</td>
              <td>销售额n1</td>
    　<td>销售额n2</td>
      </tr>  <tr style="display:block" onclick="DisplayReply(this,8,9)" >
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;<b>+</b>熟食汇总数据</td>
              <td>400</td>
    　<td>320</td>
      </tr>
      <tr style="display:block" id=trReply16>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>方便面</td>
              <td>200</td>
    　<td>200</td>
      </tr>
      <tr style="display:block" id=trReply17>
              <td bgcolor="#66CCFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b>饼干</td>
              <td>200</td>
    　<td>120</td>
      </tr></table>
    </body>
    </html>