动态添加表单域

我想实现点击按钮“销售录入”在指定位置添加一个表格id='add'
点击按钮“销售查询”在指定位置添加一个表格id='check'
我只会添加一个，可是点击不同的按钮添加不同的实现不成~~望高手指点！！！用到的代码如下——
<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>sell.jsp</title>
<%-- 销售管理主页面--%>
</head>
<body>
<table width="634" height="441" border="0" background="bg02.jpg" align="center">
  <tr>
    <td width="233" height="76">
       <font size="+4" style="font-weight:40pt; font-style:italic; font-weight:700;margin-left:25pt;">销售管理</font>
    </td>
  </tr>
  <tr>
    <td width="233" height="369">
      <table  height="264" width="233" border="0">
        <tr>
           <td height="88">
               <input type="button" name="add" value="销售录入" style="font-size:large; font-weight:bold; margin-left:30pt;" onclick="document.getElementById('sell').style.display=''">
            </td>
        </tr>
        <tr>
           <td height="88">
             <input type="button" name="check_sell" value="销售查询" style="font-size:large; font-weight:bold; margin-left:30pt;" onclick="document.getElementById('check').style.display=''">
           </td>
        </tr>
        <tr>
           <td height="88">
             <input type="button" name="check_stock" value="查看库存" style="font-size:large; font-weight:bold; margin-left:30pt;">
           </td>
        </tr>
      </table>
    </td>
    <td width="391">
    <%--这里插入表格--%>
    </td>
  </tr>
  
 
</table></body>
</html>
以下是用到的表格代码—————— <%--录入商品的表 --%>
    <form action="addsell.jsp" method="post" name="f1">
      <table id='sell' style='display: none;' border="0" width="391" >
        <tr>
           <td height="35"  width="391">
             <div class="1" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
              销售单号：<input  type="text" name="saleBillID" /></div>
           </td>
        </tr>
        <tr>
           <td height="35"  width="391">
               <div class="2" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
              商品编号：<input  type="text" name="goodsID" /></div>
           </td>
        </tr>
        <tr>
           <td height="35"  width="391">
               <div class="3" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
              商品名称：<input  type="text" name="gName" /></div>
           </td>
        </tr>
        <tr>
           <td height="35"  width="391">
               <div class="4" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
              销售数量：<input  type="text" name="saleNum" /></div>
           </td>
        </tr>
        <tr>
           <td height="35"  width="391">
              <div class="5" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
              销售日期：<input  type="text" name="saleDate" /></div>
           </td>
        </tr>
        <tr>
           <td  width="391">
              <input type="submit" name="submit" value="确认" style="margin-left:65pt; margin-bottom:35pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="reset" name="reset" value="取消" style="margin-bottom:35pt;">
           </td>
        </tr>
      </table>
     </form>
<%--查看销售信息 --%>
      <form action="checksell.jsp" method="post" name="f2">
      <table  id='check' style='display: none;' height="245" width="391"border="0">
<tr>
            <td height="35" width="391">
              <div class="1" style="font-weight:bold;width:150pt; margin-left:35pt;" >
              <i>查询所有销售信息：</i>
              <input type="submit" name="s1"  value="查询"/></div>
            </td>
         </tr>
          <tr>
            <td height="35" width="391">
              <div class="1" style="font-weight:bold;width:250pt;margin-left:35pt;" >
              <i>按商品名称查：</i><input  type="text" name="gName">
              <input type="submit" name="s2"  value="查询"/></div>
            </td>
         </tr>
          <tr>
            <td height="35" width="391">
              <div class="1" style="font-weight:bold;width:250pt;margin-left:35pt;" >
              <i>按销售数量查：</i><input  type="text" name="saleNum">
              <input type="submit" name="s3"  value="查询"/></div>
            </td>
         </tr>
          <tr>
            <td height="80" width="391">&nbsp;</td>
         </tr>
      </table>
      </form>

解决方案 »

  1.   

    没有什么特别的，采用document.createElement()或者innerHTML都可以。如果是表格还可以使用inertCell,insertRow,appendChild等方法
      

  2.   

    用js动态添加很痛苦，每次都要创建元素，用jquery可以直接写html比如 html= "<input type='button' value = '添加'/>"
      

  3.   

    LZ不是已经做出一半儿了么…… <table width="634" height="441" border="0" background="bg02.jpg" align="center">
      <tr>
      <td width="233" height="76">
      <font size="+4" style="font-weight:40pt; font-style:italic; font-weight:700;margin-left:25pt;">销售管理</font>
      </td>
      </tr>
      <tr>
      <td width="233" height="369">
      <table height="264" width="233" border="0">
      <tr>
      <td height="88">
      <input type="button" name="add" value="销售录入" style="font-size:large; font-weight:bold; margin-left:30pt;" onclick="document.getElementById('sell').style.display='';document.getElementById('check').style.display='none'">
      </td>
      </tr>
      <tr>
      <td height="88">
      <input type="button" name="check_sell" value="销售查询" style="font-size:large; font-weight:bold; margin-left:30pt;" onclick="document.getElementById('sell').style.display='none';document.getElementById('check').style.display=''">
      </td>
      </tr>
      <tr>
      <td height="88">
      <input type="button" name="check_stock" value="查看库存" style="font-size:large; font-weight:bold; margin-left:30pt;">
      </td>
      </tr>
      </table>
      </td>
      <td width="391">
      <form action="addsell.jsp" method="post" name="f1">
      <table id='sell' style='display: none;' border="0" width="391" >
      <tr>
      <td height="35" width="391">
      <div class="1" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
      销售单号：<input type="text" name="saleBillID" /></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="2" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
      商品编号：<input type="text" name="goodsID" /></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="3" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
      商品名称：<input type="text" name="gName" /></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="4" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
      销售数量：<input type="text" name="saleNum" /></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="5" style="margin-left:65pt; font-weight:bold; color:#006600; width:190pt; " >
      销售日期：<input type="text" name="saleDate" /></div>
      </td>
      </tr>
      <tr>
      <td width="391">
      <input type="submit" name="submit" value="确认" style="margin-left:65pt; margin-bottom:35pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" name="reset" value="取消" style="margin-bottom:35pt;">
      </td>
      </tr>
      </table>
      </form>
      <form action="checksell.jsp" method="post" name="f2">
      <table id='check' style='display: none;' height="245" width="391"border="0">
      <tr>
      <td height="35" width="391">
      <div class="1" style="font-weight:bold;width:150pt; margin-left:35pt;" >
      <i>查询所有销售信息：</i>
      <input type="submit" name="s1" value="查询"/></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="1" style="font-weight:bold;width:250pt;margin-left:35pt;" >
      <i>按商品名称查：</i><input type="text" name="gName">
      <input type="submit" name="s2" value="查询"/></div>
      </td>
      </tr>
      <tr>
      <td height="35" width="391">
      <div class="1" style="font-weight:bold;width:250pt;margin-left:35pt;" >
      <i>按销售数量查：</i><input type="text" name="saleNum">
      <input type="submit" name="s3" value="查询"/></div>
      </td>
      </tr>
      <tr>
      <td height="80" width="391">&nbsp;</td>
      </tr>
      </table>
      </form>   </td>
      </tr>
    </table>
      

  4.   

    把表格放到div里，
    点击的时候确定div的显示和隐藏！~