如何实现一张表格的确自动伸缩

用个层，点更多的时候将那些数据显示出来， 否则隐藏层。
若点更多的时候再加载剩余数据的话， 就用 ajax 

解决方案 »

  1.   


    <script >
    window.onload =Hid;
    function Hid(){
    var tb = document.getElementById('tbl');
    var orow = tb.rows.length; for(var i =1;i<orow;i++){ tb.rows[i+1].style.display = "none";
    }

    }
    var oBoolean = true;
    function divClick(){
    var tb = document.getElementById('tbl');
    var orow = tb.rows.length;
    if(oBoolean){
    for(var i =1;i<orow-1;i++){
    //alert(tb.rows[i+1]);
    tb.rows[i+1].style.display = "block";
    }
    document.getElementById('btn').value='  复员  ';
    oBoolean = false;

    }else{
    for(var i =1;i<orow-1;i++){ tb.rows[i+1].style.display = "none";
    }
    document.getElementById('btn').value='  更多  '
    oBoolean = true;
    }

    }</script><body >
    <INPUT TYPE="button" value=' 更多 ' id='btn' onclick='divClick()'>
    <TABLE id="tbl">
    <TR id="aa" >
    <TD>科学 </TD>
    </TR>
    <TR >
    <TD> 科学介绍XXXXXXX 
              XXXXXXXX... </TD>
    </TR>
    <TR>
    <TD> 化学 </TD>
    </TR>
    <TR>
    <TD> 化学介绍XXXXXX 
              XXXXXXXX.... </TD>
    </TR>
    <TR>
    <TD> 体育 
     </TD>
    </TR>
    <TR>
    <TD> 体育介绍XXXXXX 
              XXXXXXXX....  </TD>
    </TR></TABLE>
    <a id="alipay" name="alipay" href="javascript:void(0);http://www.163.com" target="_blank"> <img src="../images/alipay_logo.gif" border=0 valign="middle> </a>
    </body>