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的应用)