求解：怎么制作点击表格，可进行伸展/收宿的效果。急！

http://jkisjk.vip.sina.com/code/html/JKmenu1.htm

解决方案 »

  1.   


    是不是想这样：
      <table border="1" width="383" >
        <tr>
          <td width="383" onclick="changgDisplay(this)">主题1
          <pre id=theContent style="display:none">
          fdsafdsafdsafdsaf
          fdsa
          fds</pre>
          </td>
        </tr>
        <tr>
          <td width="383" onclick="changgDisplay(this)">主题2
          <pre id=theContent style="display:none">
          fdsafdsafdsafdsaf
          fdsa
          fds</pre>
          </td>
        </tr>  </table><script language=javascript>
    function changgDisplay(obj)
    {
    if (obj.all("theContent").style.display=="none")obj.all("theContent").style.display="";
    else obj.all("theContent").style.display="none";
    }
    </script>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    双击表格<BR>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
     function go(e)
     {
        var tr=e.parentElement;
    var tb=e.parentElement.parentElement.parentElement;
    var w0,w1;
    var state=0;//0 原始状态 1 展开状态
    if(e.state==0)
    {//展开
       w0=(100-(tr.cells.length-1)*5)+"%";
       w1="5%";
       state=1;
    }
    else
    {//恢复
       w0=(100/tr.cells.length)+"%";
       w1=w0;
       state=0;
    }
    var c=tr.cells.length;
    var offset=0;
    while(tr.cells[offset]!=e)offset++;//得到偏移两
    for(i=0;i<tb.cells.length;++i)
    {
       if((i%c)==offset)
       {//整列都改变
          tb.cells[i].state=state;
      tb.cells[i].style.width=w0;
       }
       else
       {
          tb.cells[i].state=0;
      tb.cells[i].style.width=w1;
       }
    }//end for loop
     }
    //-->
    </SCRIPT>
    <TABLE width=200 height=50 border=1 >
    <TR >
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    </TR>
    <TR >
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    <TD ondblclick="go(this)" state=0>&nbsp;</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
      

  3.   

    谢谢上面的－－llrock(百乐宝||昨夜星辰) 
    我想要的是纵向拉伸，能多出一行表格，能在多出的这行表格内进行动作，而不是点击两次后直接回位。求助。
      

  4.   


    是不是想这样：
      <table border="1" width="383" >
        <tr>
          <td width="383" ><font color=blue onclick="changgDisplay(this.parentElement)">主题1</font>
          <div id=theContent style="display:none">
          <input ><br>
          <input ><br>
          <input ><br>
          </div>
          </td>
        </tr>
        <tr>
          <td width="383" ><font color=blue onclick="changgDisplay(this.parentElement)">主题2</font>
          <div id=theContent style="display:none">
          <input ><br>
          <input ><br>
          <input ><br>
          </div>
          </td>
        </tr>  </table><script language=javascript>
    function changgDisplay(obj)
    {
    if (obj.all("theContent").style.display=="none")obj.all("theContent").style.display="";
    else obj.all("theContent").style.display="none";
    }
    </script>
      

  5.   

    楼主把意图说的再清楚一点，好像大家不是很明白你的意图。
    你是希望点开的时候出现一个表单，贴写之后闭上，继续填写其他的，最后可以提交这些表但是么？
    楼上JK_10000(JK1) 写的就可以了，在table外面加一个form就可以了
      

  6.   

    :)谢谢--JK_10000(JK1)
    基本为你现在所给代码这样。
    请问能不能做到－－有由close按钮控制关闭伸展的。我目前做的：（但是不能实现多主题的模式，请指正）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body>
    <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr> 
        <td onclick="mydiv.style.visibility='visible'"><a href="#">主题一：</a> </td>
      </tr>
    </table>
    <div id=mydiv style="visibility:hidden">
      <table width="600" border=1 cellpadding=0 cellspacing=0 bordercolor=#cccccc>
        <tr> 
          <td><p> </p>
            welcome to my home 
            <p align=right> 
              <input type=button name=closeme2 value=close onClick="mydiv.style.visibility='hidden'">
            </p>
            <p> </p></td>
        </tr>
      </table>
    </div> 
    </body>
    </html>
      

  7.   

    求助：
    我的代码是这样的，可是不能实现多主题（即多表格项目时）。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body>
    <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr> 
        <td onclick="mydiv.style.visibility='visible'"><a href="#">主题一：</a> </td>
      </tr>
    </table>
    <div id=mydiv style="visibility:hidden">
      <table width="600" border=1 cellpadding=0 cellspacing=0 bordercolor=#cccccc>
        <tr> 
          <td><p> </p>
            welcome to my home 
            <form name="form1" method="post" action="">
              编号： 
              <input name="textfield" type="text" size="15">
              日期： 
              <input name="textfield2" type="text" size="15">
              性别： 
              <select name="select">
                <option selected>男</option>
                <option>女</option>
              </select>
              <input type="submit" name="Submit" value="提交">
            </form> 
            <p align=right> 
              <input type=button name=closeme2 value=close onClick="mydiv.style.visibility='hidden'">
            </p>
            <p> </p></td>
        </tr>
      </table>
    </div> 
    </body>
    </html>
      

  8.   

    可以的,主要是把submit改成普通的button,加上onclick="form1.submit()"就可以了
      

  9.   

    好象您需要的是动态明细(即在页面动态增加删除行)：
    这里有一个连接，不知您是否可以看到。
    http://jkisjk.vip.sina.com/code/html/detailkeep.htm如果看不到，请把您的Email留给我，我发一份代码给您。
      

  10.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body>
    <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
            <tr> 
              <td onclick="mydiv2.style.visibility='visible'"><a href="#">主题二：</a> 
              </td>
            </tr>
          </table>
          <div id=mydiv2 style="visibility:hidden"> 
            <table width="600" border=1 cellpadding=0 cellspacing=0 bordercolor=#cccccc>
              <tr> 
                <td><p> </p>
                  welcome to my home 
                  <form name="form2" method="post" action="#">
                    编号： 
                    <input name="textfield" type="text" size="15">
                    日期： 
                    <input name="textfield2" type="text" size="15">
                    性别： 
                    <select name="select">
                      <option selected>男</option>
                      <option>女</option>
                    </select>
                    <input type="button" name="Button" value="提交" onClick="form2.submit()">
                  </form>
                  <p align=right> 
                    <input type=button name=closeme2 value=close onClick="mydiv2.style.visibility='hidden'">
                  </p>
                  <p> </p></td>
              </tr>
            </table>
          </div>
    <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr> 
        <td onclick="mydiv.style.visibility='visible'"><a href="#">主题一：</a> </td>
      </tr>
    </table>
    <div id=mydiv style="visibility:hidden">
      <table width="600" border=1 cellpadding=0 cellspacing=0 bordercolor=#cccccc>
        <tr> 
          <td><p> </p>
            welcome to my home 
            <form name="form1" method="post" action="#">
              编号： 
              <input name="textfield" type="text" size="15">
              日期： 
              <input name="textfield2" type="text" size="15">
              性别： 
              <select name="select">
                <option selected>男</option>
                <option>女</option>
              </select>
              <input type="button" name="Button" value="提交" onClick="form1.submit()">
            </form> 
            <p align=right> 
              <input type=button name=closeme2 value=close onClick="mydiv.style.visibility='hidden'">
            </p>
            <p> </p></td>
        </tr>
      </table>
    </div> 
    </body>
    </html>
      

  11.   

    谢谢crossdavi(铁十字) ！
    您帮我解决了用close控制关闭的问题。可是两个主题的间距却相距很远，它保留了那个隐藏着的表格高度，请问能解决吗？
    即，两主题是纵向相连着的。（主题位置：最好是在纵向的同一表格的不同单元格中）
      

  12.   

    不客气,我也是初学把visibilaty="hidden"改成display="none"就可以了,同时在onload的时候先display="none"
    点击的时候display="";<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <script>
    function pm_select(pm){
    pm_unselect();

    if(pm=="货到付款") pm_cod.style.display="";
    if(pm=="银行卡") pm_card.style.display="";
    if(pm=="邮局汇款") pm_post.style.display="";
    </script>
    <body onload="mydiv2.style.display='none';mydiv.style.display='none'">
    <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
            <tr> 
              <td onclick="mydiv2.style.display=''"><a href="#">主题二：</a> 
              </td>
            </tr>
          </table>
      
      
    <div id=mydiv2 STYLE="width:600"><p></p>
                  welcome to my home 
                  <form name="form2" method="post" action="#">
                    编号： 
                    <input name="textfield" type="text" size="15">
                    日期： 
                    <input name="textfield2" type="text" size="15">
                    性别： 
                    <select name="select">
                      <option selected>男</option>
                      <option>女</option>
                    </select>
                    <input type="button" name="Button" value="提交" onClick="form2.submit()">
                  </form>
                  <p align=right> 
                    <input type=button name=closeme2 value=close onClick="mydiv2.style.display='none'" >
                  </p>
                  <p> </p></div>
      
      
      <table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
            <tr> 
              <td id='td1' onclick="mydiv.style.display=''"><a href="#">主题一：</a> 
              </td>
            </tr>
          </table>
    <div id=mydiv style="width:600">       
      <p> </p>
                  welcome to my home 
                  <form name="form1" method="post" action="#">
                    编号： 
                    <input name="textfield" type="text" size="15">
                    日期： 
                    <input name="textfield2" type="text" size="15">
                    性别： 
                    <select name="select">
                      <option selected>男</option>
                      <option>女</option>
                    </select>
                    <input type="button" name="Button" value="提交" onClick="form1.submit()">
                  </form>
                  <p align=right> 
                    <input type=button name=closeme2 value=close onClick="mydiv.style.display='none'">
                  </p>
                  <p> </p></div> 
     
    </body>
    </html>
      

  13.   

    不好意思，有一小段垃圾在里面就是《script》.....《/script》自己删掉咯
      

  14.   

    Thank you! crossdavi(铁十字)