如何实现动态增加删除表单域

我想在单击“入货”按钮时候显示填写的表单，单击删除之后表单域消失。我折腾了好久就是没有出来，想请高手帮忙！！！
PS：先谢谢了！！！我刚刚开始学习JS用的很不熟练，请指教吖~~
以下是页面代码——
<%@ 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>product.jsp</title>
</head>
<body>
<form action="addproduct.jsp" method="post" name="f">
<table width="634" height="441" border="0"  background="bg02.jpg" align="center">
   <tr>
    <td width="664" height="77">
        <div class="7" style="margin-left:25pt;width:210pt; height:65pt; font-weight:bold;" >
          <font  size="+4" style="font-weight:40pt; font-style:italic;">进货管理</font><br>
            <input  type="button" name="1" value="入货" style="font-weight:bold; font-size:20px;" onclick="">
            <input  type="button" name="2" value="库存查看" style="font-weight:bold; font-size:20px;">
        </div>
     </td>
  </tr>
  <tr>
    <td><%--在此处添加表单元素 --%></td>
  
  </tr>  <tr>
    <td width="664" height="76">&nbsp;</td>
  </tr>
</table>
</form>  </body>
</html>
这个是我想添加的表单元素代码——<tr>
    <td height="35" width="634">
       <div class="1" style="margin-left:80pt; width:190pt; font-weight:bold; color:#006600" >
        进货单号：<input  type="text" name="stockBillID" /></div>
    </td>
</tr>
<tr>
    <td height="35" width="634">
       <div class="2" style="margin-left:80pt;width:190pt; font-weight:bold; color:#006600 " >
    商品编号：<input  type="text" name="goodsID" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
     <div class="3" style="margin-left:80pt;width:190pt; font-weight:bold; color:#006600 " >
    商品名称：<input  type="text" name="gName" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
     <div class="4" style="margin-right:80pt; margin-left:80pt; font-weight:bold; color:#006600 " >
    供货商号：<input  type="text" name="supplierID" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
     <div class="5" style="margin-left:92pt;width:178pt;  font-weight:bold; color:#006600" >
    进货价：<input  type="text" name="stockPrice" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
    <div class="6" style="margin-left:105pt;width:165pt;  font-weight:bold; color:#006600" >
    数量：<input  type="text" name="quantity" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
    <div class="7" style="margin-left:105pt;width:165pt; font-weight:bold; color:#006600 " >
    金额：<input  type="text" name="totalMoney" /></div></td>
</tr>
<tr>
    <td height="35" width="634">
    <div class="8" style=" margin-left:80pt; width:320pt; font-weight:bold; color:#006600 " >
    进货日期：<input  type="text" name="stockDate" />&nbsp;&nbsp;&nbsp;
            <input type="submit" name="sumbit" value="提交" style="font-weight:bold;" />&nbsp;&nbsp;&nbsp;
            <input  type="reset" name="reset" value="取消"style="font-weight:bold;" /></div></td>
</tr>

解决方案 »

  1.   

    <!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>product.jsp</title>
    </head>
    <body>
    <form action="addproduct.jsp" method="post" name="f">
    <table width="634" height="441" border="0" background="bg02.jpg" align="center">
      <tr>
      <td width="664" height="77">
      <div class="7" style="margin-left:25pt;width:210pt; height:65pt; font-weight:bold;" >
      <font size="+4" style="font-weight:40pt; font-style:italic;">进货管理</font><br>
      <input type="button" name="1" value="入货" style="font-weight:bold; font-size:20px;" onclick="document.getElementById('sdf').style.display=''">
      <input type="button" name="2" value="库存查看" style="font-weight:bold; font-size:20px;">
      </div>
      </td>
      </tr>
      <tr>
      <td>
    <table id='sdf' style='display:none'>
    <tr>
      <td height="35" width="634">
      <div class="1" style="margin-left:80pt; width:190pt; font-weight:bold; color:#006600" >
      进货单号：<input type="text" name="stockBillID" /></div>
      </td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="2" style="margin-left:80pt;width:190pt; font-weight:bold; color:#006600 " >
      商品编号：<input type="text" name="goodsID" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="3" style="margin-left:80pt;width:190pt; font-weight:bold; color:#006600 " >
      商品名称：<input type="text" name="gName" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="4" style="margin-right:80pt; margin-left:80pt; font-weight:bold; color:#006600 " >
      供货商号：<input type="text" name="supplierID" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="5" style="margin-left:92pt;width:178pt; font-weight:bold; color:#006600" >
      进货价：<input type="text" name="stockPrice" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="6" style="margin-left:105pt;width:165pt; font-weight:bold; color:#006600" >
      数量：<input type="text" name="quantity" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="7" style="margin-left:105pt;width:165pt; font-weight:bold; color:#006600 " >
      金额：<input type="text" name="totalMoney" /></div></td>
    </tr>
    <tr>
      <td height="35" width="634">
      <div class="8" style=" margin-left:80pt; width:320pt; font-weight:bold; color:#006600 " >
      进货日期：<input type="text" name="stockDate" />&nbsp;&nbsp;&nbsp;
      <input type="submit" name="sumbit" value="提交" style="font-weight:bold;" />&nbsp;&nbsp;&nbsp;
      <input type="reset" name="reset" value="取消"style="font-weight:bold;" /></div></td>
    </tr>
    </table>
    </td>
       
      </tr>  <tr>
      <td width="664" height="76">&nbsp;</td>
      </tr>
    </table>
    </form>   </body>
    </html> <input type="button" name="1" value="入货" style="font-weight:bold; font-size:20px;" onclick="document.getElementById('sdf').style.display=''">
    意思是点入货那么就显示
    如果不显示
    document.getElementById('sdf').style.display='none'
      

  2.   

    1、图片不显示？看图片存在不，路径对不。
    2、连接返回这个页面时候？存货不会存在，除非你写入cookie,读写cookie，或者用ajax就不用刷页面了。
      

  3.   

    var sourc=window.event.srcElement?event.srcElement:event.target;
    if(source.tagName=="TD"){
    soruce=soruce.parentNode;
    var child=source.children;
    for(var i=0;i<child.length;i++){
    child[i].style.backgroundColor="red"
    }
    }