喜悦国际村 » XML/HTML/CSS/Js » 请问如何动态增加表格？我想一次增加几行，而不是一行一行

页: [1]
lzweb2008-6-22 08:59 AM
请问如何动态增加表格？我想一次增加几行，而不是一行一行

我的源文件为：

<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>

我需要的效果是 按 增加后，能 增加几行目的地、公里数、的士费的。也就是说按一次增加就增加土黄色背景的表格区域。现在只能是增加第一行“目的地”。我改来改去没改成，同时删除则是删除一次土黄色背景区域。

只要运行一下上面代码就明白了，哪位大哥帮帮，唉。

pplboy2008-6-23 02:55 AM
<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">
<A id=addattachlink onClick="newnode = $('kao').cloneNode(true); $('articleinsert').appendChild(newnode)" href="#">[增加] </A>
<A id=addattachlink onClick="$('attachbody').childNodes.length > 1 && $('attachbody').lastChild ? $('attachbody').removeChild($('attachbody').lastChild) : 0;" href="#">[减少] </A>

<table border=0 width=100% cellPadding=4 cellSpacing=1 id="kao">
                  <tr bgcolor=#38C972 align=center>
                    <td nowrap>  </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%"></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="确 定">
        　
                                <input name="Submit22" type="reset" class="button" value="重 填">
                              </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>


查看完整版本: 请问如何动态增加表格？我想一次增加几行，而不是一行一行


Powered by Discuz! Archiver 6.1.0  © 2001-2006 Comsenz Inc.
Processed in 0.00721 second(s), 2 queries