对文本输入框的新增和删除

1、第一个应用是对上传文件的新增或者删除

     这个主要是采用的是struts2的框架。

   

  <s:form action="upload" theme="simple" enctype="multipart/form-data">
     <table align="center" border="1" width="50%">
     <tbody id="one">
      <tr>
     <td>  username</td><td> <s:textfield name="username"  label="username"></s:textfield></td>
      </tr>
      <tr>
        <td>password</td><td><s:password name="password" label="password"></s:password></td>
      </tr>
      <tr>
        <td>file</td><td><s:file name="file" label="file"></s:file><input type="button" οnclick="add();"    value="新增上传文件"></td>
      </tr>
      </tbody>
     </table>

这里已经有一个可以上传文件、这里通过js可以上传多个文件

 

<script type="text/javascript">
function add()
{
  var tbodyEle = document.getElementById("one");
 
  var trEle = document.createElement("tr");
  var tdEle = document.createElement("td");
  var textEle = document.createTextNode("file");
 
  tdEle.appendChild(textEle);
  trEle.appendChild(tdEle);
 
  tdEle=document.createElement("td");
  var inputEle=document.createElement("input");
  inputEle.name="file";
  inputEle.type="file";
  tdEle.appendChild(inputEle);
 
  var inputEle = document.createElement("input");
  inputEle.value="删除";
  inputEle.type="button"
  inputEle.οnclick=function()
  {
  tbodyEle.removeChild(trEle);
  }
  tdEle.appendChild(inputEle);
 
  trEle.appendChild(tdEle);
  tbodyEle.appendChild(trEle);
}

</script>

   

这里在后台的action中可以通过    private List<File> file;//这里是定义可以上传多个文件

 

2、第二个应用是订单和明细的应用

  <body>
    <table align="center" border="1" width="600">
       <tr align="center">
         <td>订单名称</td><td><input name="info.ordername" /></td>
       </tr>
       <tr align="center">
         <td>订单数量</td><td><input name="num"  οnclick="addnum();"/></td>
       </tr>
       <tr align="center">
         <td>总价格</td><td><input name="totalje" οnclick="addtotal();"/></td>
       </tr>
       <tr align="center">
         <td>订单日期</td><td> <input name="info.orderdate" /></td>
       </tr>
    </table>
    <p align="center">订单明细(<input type="button" value="添加明细" οnclick="addmx();">)</p>
     <div id="container">
     <div>
       <table align="center" width="600" border="1" style="display:inline;">
          <tr align="center">
            <td>产品名称</td><td><input name="items[0].mxname"  size=8></td>
            <td >数量</td><td><input name="items[0].mxnum" size=8 id="num0" ></td>
            <td>单价</td><td><input name="items[0].mxprice" size=8 id="price0"></td>
          </tr>
       </table><input type=button value="删除" οnclick="this.parentNode.outerHTML='';i--;alert(i);"/>
       </div>
      </div>  
  </body>

  js代码为:

<script type="text/javascript">
     var i=1;
       function addmx()
       {
         var container = document.getElementById("container");
         var module="<div>"+
                      "<table width=600 border=1 align=center style=\"display:inline;\">"+
                      "<tr align=center>"+
                         "<td>产品名称</td><td><input name=\"items["+i+"].mxname\" size=8 ></td>"+
                         "<td>数量</td><td><input name=\"items["+i+"].mxnum\" size=8 id=num"+i+"></td>"+
                         "<td>单价</td><td><input name=\"items["+i+"].mxprice\" size=8 id=price"+i+"></td>"
                      +"</tr>"
                     +"</table><input type=button value=\"删除\" οnclick=\"this.parentNode.outerHTML='';i--;alert(i);\">"
                     +"<div>";
                   
            container.insertAdjacentHTML("beforeEnd",module);
        i++;
       }
     //订单数量
    function addnum(){
      var num = document.getElementById("num");
     
      var t=0;
      for(var p=0;p<i;p++){
       var n = document.getElementById("num"+p).value;
       if(n!=""){
         t=t+parseInt(n);
         }
       }
       num.value=t;
     }
     //总金额
     function addtotal()
      {
        var totalje=0;
        for(var j=0;j<i;j++)
        {
          var numValue=document.all("num"+j).value;
          var priceValue=document.all("price"+j).value;
          if(numValue!=""&&priceValue!="")
             totalje=totalje+parseInt(numValue)*parseFloat(priceValue);;
        } 
        document.all("totalje").value=totalje;
      }
    </script>

 

   在后台action可以用list得到(这个是在struts2的应用)

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值