请问如何动态增加表格？我想一次增加几行，而不是一行一行

我的源文件为：<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<script language="javascript">
function $(id) {
return document.getElementById(id);
}
</script>
<!--<script language="JavaScript" src="../tools/JSValidation/validation-framework.js"></script>-->
<LINK rel='stylesheet' href='../style.css'>
</HEAD>
<body bgcolor=#EFFFF5 leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0>
<center>
  <center><table width=100% border=0 cellspacing=0 cellpadding=0>  <tr bgcolor=#d0d0d0>    <td width=9 background='../images/fra_mid1.gif'></td>    <td class=content height=100 valign=top><table width=100% border=0 cellspacing=2 cellpadding=2><tr><td>
<form action="into.php" method="post" enctype="multipart/form-data" name="articleinsert" id="articleinsert">
<table border=0 width=100% cellPadding=4 cellSpacing=1>
                  <tr bgcolor=#38C972 align=center> 
                    <td nowrap>&nbsp;</td>
                  </tr>
                  <tr bgcolor=#9FF1B8 align=center> 
                    <td><table width="100%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
                          <tr>
                            <td width="24%">
                            <div align="right"></div></td>
                            <td width="76%">
                      <A id=addattachlink onClick="newnode = $('attachbodyhidden').firstChild.cloneNode(true); $('attachbody').appendChild(newnode)" href="#">[增加]</A>
                      <A id=addattachlink onClick="$('attachbody').childNodes.length > 1 &amp;&amp; $('attachbody').lastChild ? $('attachbody').removeChild($('attachbody').lastChild) : 0;" href="#">[减少]</A>                            </td>
                          </tr>
  <TBODY id=attachbody>
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">目的地：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="place" type="text" class="input" id="place" size="50"></td>
                          </tr>
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">公里数：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="km" type="text" class="input" id="km" size="50"></td>
                          </tr>
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">的士费：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="taxi" type="text" class="input" id="taxi" size="50"></td>
                          </tr>
  </TBODY>
  <TBODY id=attachbodyhidden style="DISPLAY: none">
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">目的地：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="place" type="text" class="input" id="place" size="50"></td>
                          </tr>
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">公里数：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="km" type="text" class="input" id="km" size="50"></td>
                          </tr>
                          <tr>
                            <td width="24%" bgcolor="#99CC33">
                            <div align="right">的士费：</div></td>
                            <td width="76%" bgcolor="#99CC33">
                            <input name="taxi" type="text" class="input" id="taxi" size="50"></td>
                          </tr>
  </TBODY></table>
                              <!--<textarea name="content" cols="60" rows="15"></textarea>-->
                              <input name="word" type="hidden" id="word" value=""></td>
                    </tr>
                          <tr>
                            <td colspan="2">
                              <div align="center">
                                <input name="Submit" type="submit" class="button" value="确&nbsp;定">
        　
                                <input name="Submit22" type="reset" class="button" value="重&nbsp;填">
                              </div></td>
                          </tr>
                      </table></form></td>
                  </tr>
                </table>
<table border=1 width=100% cellspacing=0 cellpadding=1 bgcolor=#38C972>
<tr height=22><td></td></tr>
</table>
</td></tr></table>    </tr>  </table>
  </center></center>
</BODY>
</HTML>我需要的效果是 按 增加后，能 增加几行目的地、公里数、的士费的。也就是说按一次增加就增加土黄色背景的表格区域。现在只能是增加第一行“目的地”。我改来改去没改成，同时删除则是删除一次土黄色背景区域。只要运行一下上面代码就明白了，哪位大哥帮帮，唉。

解决方案 »

  1.   

     <A id=addattachlink onClick="document.getElementById('attachbodyhidden').style.display='block'" href="#">[增加] </A> 
                          <A id=addattachlink onClick="document.getElementById('attachbodyhidden').style.display='none'" href="#">[减少] </A>                  
    把“增加”和“减少”修改为上面的吧，测试通过!
      

  2.   

    <HTML> 
    <HEAD> 
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> 
    <META HTTP-EQUIV='Pragma' CONTENT='no-cache'> 
    <script language="javascript"> 
    function $(id) { 
    return document.getElementById(id); 
    } function add(){
    //newnode = $('attachbodyhidden').firstChild.cloneNode(true); $('attachbody').appendChild(newnode)
    var oTbl = $('tbl1');
    var oTbody = $('attachbody');
    var newNode = oTbody.cloneNode(true);
    oTbl.insertBefore(newNode,oTbody);}function del(){
    var oTbl = $('tbl1');
    oTbl.removeChild(oTbl.lastChild);
    }
    </script> 
    <!-- <script language="JavaScript" src="../tools/JSValidation/validation-framework.js"> </script>--> 
    <LINK rel='stylesheet' href='../style.css'> 
    </HEAD> 
    <body bgcolor=#EFFFF5 leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0> 
    <center> 
      <center> <table width=100% border=0 cellspacing=0 cellpadding=0>  <tr bgcolor=#d0d0d0>    <td width=9 background='../images/fra_mid1.gif'> </td>    <td class=content height=100 valign=top> <table width=100% border=0 cellspacing=2 cellpadding=2> <tr> <td> 
    <form action="into.php" method="post" enctype="multipart/form-data" name="articleinsert" id="articleinsert"> 
    <table border=0 width=100% cellPadding=4 cellSpacing=1> 
                      <tr bgcolor=#38C972 align=center> 
                        <td nowrap>&nbsp; </td> 
                      </tr> 
                      <tr bgcolor=#9FF1B8 align=center> 
                        <td> <table id="tbl1" width="100%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC"> 
                              <tr> 
                                <td width="24%"> 
                                <div align="right"> </div> </td> 
                                <td width="76%"> 
                          <A id=addattachlink onClick="add()" href="#">[增加] </A> 
                          <A id=addattachlink onClick="del()"  href="#">[减少] </A>                            </td> 
                              </tr> 
      <TBODY id=attachbody> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">目的地： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="place" type="text" class="input" id="place" size="50"> </td> 
                              </tr> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">公里数： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="km" type="text" class="input" id="km" size="50"> </td> 
                              </tr> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">的士费： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="taxi" type="text" class="input" id="taxi" size="50"> </td> 
                              </tr> 
      </TBODY> 
      </table> 
                                  <!-- <textarea name="content" cols="60" rows="15"> </textarea>--> 
                                  <input name="word" type="hidden" id="word" value=""> </td> 
                        </tr> 
                              <tr> 
                                <td colspan="2"> 
                                  <div align="center"> 
                                    <input name="Submit" type="submit" class="button" value="确&nbsp;定"> 
            　 
                                    <input name="Submit22" type="reset" class="button" value="重&nbsp;填"> 
                                  </div> </td> 
                              </tr> 
                          </table> </form> </td> 
                      </tr> 
                    </table> 
    <table border=1 width=100% cellspacing=0 cellpadding=1 bgcolor=#38C972> 
    <tr height=22> <td> </td> </tr> 
    </table> 
    </td> </tr> </table>    </tr>  </table> 
      </center> </center> 
    </BODY> 
    </HTML> 
      

  3.   

    <HTML> 
    <HEAD> 
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> 
    <META HTTP-EQUIV='Pragma' CONTENT='no-cache'> 
    <script language="javascript"> 
    function $(id) { 
    return document.getElementById(id); 
    } /*   追加*/
    function add(){
    //newnode = $('attachbodyhidden').firstChild.cloneNode(true); $('attachbody').appendChild(newnode)
    var oTbl = $('tbl1');
    var oTbody = $('attachbody');
    var newNode = oTbody.cloneNode(true);
    oTbl.insertBefore(newNode,oTbody);}/*   删除*/
    function del(){
    var oTbl = $('tbl1'); if(oTbl.childNodes.length > 2){
    oTbl.removeChild(oTbl.lastChild);

    }else{

    alert('不能全部删除')
    }

    }
    </script> 
    <!-- <script language="JavaScript" src="../tools/JSValidation/validation-framework.js"> </script>--> 
    <LINK rel='stylesheet' href='../style.css'> 
    </HEAD> 
    <body bgcolor=#EFFFF5 leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0> 
    <center> 
      <center> <table width=100% border=0 cellspacing=0 cellpadding=0>  <tr bgcolor=#d0d0d0>    <td width=9 background='../images/fra_mid1.gif'> </td>    <td class=content height=100 valign=top> <table width=100% border=0 cellspacing=2 cellpadding=2> <tr> <td> 
    <form action="into.php" method="post" enctype="multipart/form-data" name="articleinsert" id="articleinsert"> 
    <table border=0 width=100% cellPadding=4 cellSpacing=1> 
                      <tr bgcolor=#38C972 align=center> 
                        <td nowrap>&nbsp; </td> 
                      </tr> 
                      <tr bgcolor=#9FF1B8 align=center> 
                        <td> <table id="tbl1" width="100%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC"> 
                              <tr> 
                                <td width="24%"> 
                                <div align="right"> </div> </td> 
                                <td width="76%"> 
                          <A id=addattachlink onClick="add()" href="#">[增加] </A> 
                          <A id=addattachlink onClick="del()"  href="#">[减少] </A>                            </td> 
                              </tr> 
      <TBODY id=attachbody> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">目的地： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="place" type="text" class="input" id="place" size="50"> </td> 
                              </tr> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">公里数： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="km" type="text" class="input" id="km" size="50"> </td> 
                              </tr> 
                              <tr> 
                                <td width="24%" bgcolor="#99CC33"> 
                                <div align="right">的士费： </div> </td> 
                                <td width="76%" bgcolor="#99CC33"> 
                                <input name="taxi" type="text" class="input" id="taxi" size="50"> </td> 
                              </tr> 
      </TBODY> 
      </table> 
                                  <!-- <textarea name="content" cols="60" rows="15"> </textarea>--> 
                                  <input name="word" type="hidden" id="word" value=""> </td> 
                        </tr> 
                              <tr> 
                                <td colspan="2"> 
                                  <div align="center"> 
                                    <input name="Submit" type="submit" class="button" value="确&nbsp;定"> 
            　 
                                    <input name="Submit22" type="reset" class="button" value="重&nbsp;填"> 
                                  </div> </td> 
                              </tr> 
                          </table> </form> </td> 
                      </tr> 
                    </table> 
    <table border=1 width=100% cellspacing=0 cellpadding=1 bgcolor=#38C972> 
    <tr height=22> <td> </td> </tr> 
    </table> 
    </td> </tr> </table>    </tr>  </table> 
      </center> </center> 
    </BODY> 
    </HTML>