主要使用脚本的对html页面进行动态更新 HTML页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>indexl.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> </head> <mce:script type="text/javascript"><!-- function ajax(No){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("get","orderAjax?tsNo="+No,true) xmlhttp.onreadystatechange=function (){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var val=xmlhttp.responseText; var json = eval("(" + val + ")"); select(val); } } } xmlhttp.send(); } function select(val){ var json=eval("("+val+")"); $("orderNo").value=json.tsaleform.FSaleformNo; $("date").value=json.tsaleform.FSaleformDate.toString().substr(0,10); $("customer").value=json.tsaleform.FCustomer; $("emp").value=json.tsaleform.FSales; var arr=json.tsaleform.TSaleformDetails; var tb=$("orderDetail"); for(var i=0;i<arr.length;i++){ var row=tb.insertRow(i+1); row.insertCell(0).innerText=""; row.insertCell(1).innerHTML="<input type='text' value='"+arr[i].FGoods+"' />"; row.insertCell(2).innerHTML="<input type='text' value='"+arr[i].FQty+"' />"; row.insertCell(3).innerHTML="<input type='text' value='"+arr[i].FPrice+"' />"; row.insertCell(4).innerText=arr[i].FMoneyAmt; row.insertCell(5).innerHTML="<img src="Images/addrow.gif" mce_src="Images/addrow.gif" οnclick='addRow(this)' /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" οnclick='delRow(this)' />"; } orderByRow(); } function $(id){ return document.getElementById(id); } function addRow(obj){ var tb=$("orderDetail"); var tr=obj.parentNode.parentNode; var row=tb.insertRow(tr.rowIndex+1); row.insertCell(0).innerText=""; row.insertCell(1).innerHTML="<input type='text' />"; row.insertCell(2).innerHTML="<input type='text' onpropertychange='cale(this)' />"; row.insertCell(3).innerHTML="<input type='text' onpropertychange='cale(this)'/>"; row.insertCell(4).innerText=""; row.insertCell(5).innerHTML="<img src="Images/addrow.gif" mce_src="Images/addrow.gif" οnclick='addRow(this)' /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" οnclick='delRow(this)' />"; orderByRow(); } function delRow(obj){ if($("orderDetail").rows.length>2){ $("orderDetail").deleteRow(obj.parentNode.parentNode.rowIndex); orderByRow(); }else{ alert("最后一行不能删除"); } } function orderByRow(){ var tb=$("orderDetail"); for(var i=1;i<tb.rows.length;i++){ tb.rows[i].cells[0].innerText=i; } } function update(){ var orderNo=$("orderNo").value; var date=$("date").value; var customer=$("customer").value; var emp=$("emp").value; var order=orderNo+","+date+","+customer+","+emp; var tb=$("orderDetail"); var detail=""; for(var i=1;i<tb.rows.length;i++){ if(tb.rows[i].cells[1].childNodes[0].value!=null){ var lineNo=tb.rows[i].cells[0].innerText; var goodsName=tb.rows[i].cells[1].childNodes[0].value; var number=tb.rows[i].cells[2].childNodes[0].value; var price=tb.rows[i].cells[3].childNodes[0].value; var amt=tb.rows[i].cells[4].innerText; detail=lineNo+","+goodsName+","+number+","+price+","+amt+"|"+detail; } } var xmlhttp=new XMLHttpRequest(); xmlhttp.open("post","orderUpdate!updateOrder?order="+order+"&detail="+detail.substring(0,detail.length-1),true); xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); xmlhttp.onreadystatechange=function (){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var val=xmlhttp.responseText; alert("提交成功"); } } } xmlhttp.send(null); } function cale(obj){ var tr=obj.parentNode.parentNode; var tb=$("orderDetail"); var count=tr.cells[2].childNodes[0].value; var price=tr.cells[3].childNodes[0].value; tr.cells[4].innerText=count*price; } function start(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("get","orderUpdate!selectOrderNo",true); xmlhttp.onreadystatechange=function (){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var val=xmlhttp.responseText; $("orderNo").value=val; } } } xmlhttp.send(); } window.οnlοad=act; function act(){ var local=location.href; var str=local.substr(local.indexOf("?")+1); var arr=str.split("&"); var par=arr[0].substring(arr[0].indexOf("=")+1); if(par.toLowerCase()=="edit"){ var par2=arr[1].substring(arr[1].indexOf("=")+1); ajax(par2); } if(par.toLowerCase()=="add"){ start(); } } // --></mce:script> <mce:style type="text/css"><!-- table { border:1px; border-collapse: collapse; } --></mce:style><style type="text/css" mce_bogus="1"> table { border:1px; border-collapse: collapse; } </style> <body> <input type="button" οnclick="ajax()" value="提交" /> <input type="button" οnclick="act()" value="提交" /> <div style="margin-left:100px" mce_style="margin-left:100px"> <table width="800px" border="1px" id="order"> <tr> <th colspan="4" align="center" >销售出货单</th> </tr> <tr> <td> 单号: </td> <td> <input type="text" id="orderNo" readonly="readonly"/> </td> <td> 日期: </td> <td> <input type="text" id="date"/> </td> </tr> <tr> <td> 客户: </td> <td> <input type="text" id="customer"/> </td> <td> 业务员: </td> <td> <input type="text" id="emp"/> </td> </tr> <tr> <td>明细</td> <td>备注</td> <td colspan="2"> </td> </tr> <tr> <td colspan="4" height="100px" align="center" > <table border="1px" colspan="0" rowspan="0" id="orderDetail"> <tr> <td>序号</td> <td>商品名称</td> <td>数量</td> <td>单价</td> <td>金额</td> <td> </td> </tr> <tr> <td>1</td> <td> <input type="text" /> </td> <td> <input type="text" onpropertychange="cale(this)" /> </td> <td> <input type="text" onpropertychange="cale(this)"/> </td> <td> </td> <td> <img src="Images/addrow.gif" mce_src="Images/addrow.gif" οnclick="addRow(this)" /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" οnclick="delRow(this)" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="4" align="right"> <input type="button" value="保存" οnclick="update()"/> <input type="button" value="关闭"/> </td> </tr> </table> </div> </body> </html> struts配置 <package name="order" extends="struts-default" namespace="/"> <action name="order" class="OrderAction"> <result name="success">/index.jsp</result> </action> </package> <package name="orderAjax" extends="json-default"> <action name="orderAjax" class="OrderAction"> <result type="json"></result> </action> <action name="orderUpdate" class="OrderAction"> <result></result> </action> </package> action类 package org.qyl.action; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.HashSet; import java.util.Set; import java.util.logging.SimpleFormatter; import org.apache.struts2.ServletActionContext; import org.qyl.pojo.TSaleform; import org.qyl.pojo.TSaleformDetail; import org.qyl.pojo.TSaleformDetailId; import org.qyl.service.IOrderService; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class OrderAction extends ActionSupport { private IOrderService iorderService; public void setIorderService(IOrderService iorderService) { this.iorderService = iorderService; } //请求参数 private String tsNo; public String getTsNo() { return tsNo; } public void setTsNo(String tsNo) { this.tsNo = tsNo; } private TSaleform tsaleform; public TSaleform getTsaleform() { return tsaleform; } public void setTsaleform(TSaleform tsaleform) { this.tsaleform = tsaleform; } public String execute(){ try { tsaleform=iorderService.selectById(tsNo); ActionContext.getContext().getSession().put("tsaleform", tsaleform); return SUCCESS; } catch (Exception e) { e.printStackTrace(); return ERROR; } } //JSON串化属性 private String order; //JSON串化属性 private String detail; public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } public String getDetail() { return detail; } public void setDetail(String detail) { this.detail = detail; } //更新方法 @SuppressWarnings("unchecked") public String updateOrder() throws Exception{ System.out.println(detail); String [] orders=order.split(","); TSaleform ts=new TSaleform(); ts.setFSaleformNo(orders[0]); SimpleDateFormat formate=new SimpleDateFormat("yyyy-MM-dd"); long time=formate.parse(orders[1]).getTime(); Timestamp date=new Timestamp(time); ts.setFSaleformDate(date); ts.setFCustomer(orders[2]); ts.setFSales(orders[3]); String [] details={detail.substring(0,detail.indexOf("|")),detail.substring(detail.indexOf("|")+1)}; Set dets=new HashSet(); for(String str : details){ String [] det=str.split(","); TSaleformDetailId tsdid=new TSaleformDetailId(); tsdid.setFLineId(Short.parseShort(det[0])); tsdid.setTSaleform(ts); TSaleformDetail tsd=new TSaleformDetail(); tsd.setId(tsdid); tsd.setFGoods(det[1]); tsd.setFQty(Double.parseDouble(det[2])); tsd.setFPrice(Double.parseDouble(det[3])); tsd.setFMoneyAmt(Double.parseDouble(det[4])); dets.add(tsd); } ts.setTSaleformDetails(dets); iorderService.updateDetail(ts); PrintWriter out=ServletActionContext.getResponse().getWriter(); out.print("提交成功"); return null; } public String selectOrderNo() throws Exception{ PrintWriter out=ServletActionContext.getResponse().getWriter(); out.print(iorderService.selectOrderNo()); return null; } }