添加账单（通过ajax加载供应商对应商品）Input边框、DatePicker、returnData-i加入商品td项赋值

//在JSP中加入表单/表格/tr-标题标签

	<div class="content">
			<form id="form" action="<%=basePath%>servlet/addBill.do"
				method="post">
				<table class="box">

					<tbody id="tbody">

						<tr>
							<td class="field">选择供应商：<input id="counti" name="counti"
								type="hidden" /></td>
							<td><select onchange="newProvider();" id="area" name="area">
									<option value="-1">&nbsp;&nbsp;地区&nbsp;&nbsp;</option>
							</select><select onchange="newGoods();" id="provider" name="provider">
									<option value="-1">&nbsp;&nbsp;供应商&nbsp;&nbsp;</option>
							</select></td>
						</tr>
						<tr id="selectGoods">
							<td class="field">选择商品：</td>
							<td></td>
						</tr>
						<tr>
							<td style="padding-left:50px;" colspan="2"><table
									style="width:90%;" id="goods" name="goods"></table>
							</td>
						</tr>
						<tr>
							<td class="field">总金额：</td>
							<td><input id="totalamount" name="totalamount" value="0"
								class="input-totalamount" type="text" readonly="true" />元</td>
						</tr>
						<tr>
							<td class="field">下单时间：</td>
							<td><input id="btime" name="btime" class="Wdate" type="text"
								onClick="WdatePicker({skin:'default',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})">
							</td>
						</tr>

						<tr>
							<td class="field">是否付款：</td>

							<td><select id="ispaid" name="ispaid"
								onchange="ispaydate();">
									<option value="0">未付款</option>
									<option value="1">已付款</option>
							</select></td>
						</tr>
						<tr id="pdtr">
							<td class="field">付款时间：</td>
							<td><input id="paydate" name="paydate" class="Wdate"
								type="text"
								onClick="WdatePicker({skin:'default',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})">
							</td>
						</tr>
				
	<tr>
							<td style="padding-left:50px;" colspan="2"><table
									style="width:90%;" id="sub" name="sub"></table>
							</td>
						</tr>
					</tbody>

				</table>
			</form>
		</div>

//JS-ajax：通过地区异步加载供应商-异步加载对应商品
/*加载地区 */

	$(function() {

		$.getJSON("servlet/getArea.do", "sel=2", function(returnData) {
			for ( var i = 0; i < returnData.length; i++) {

				$("#area").append(
						"<option value='"+returnData[i].aid+"'>"
								+ returnData[i].aname + "</option>");

			}
		});
	});

/*通过地区异步加载供应商  */

function newProvider() {

		var provider = document.getElementById("provider");
		provider.options.length = 1;
		$.getJSON("servlet/GP.get", "aid=2", function(returnData) {

			for (i = 0; i < returnData.length; i++) {
				if (returnData[i].aid != undefined
						&& returnData[i].aid == $("#area").val()) {
					$("#provider").append(
							"<option value='"+returnData[i].pid+"'>"
									+ returnData[i].pname + "</option>");

				}
			}
		});
	}

/*通过供应商异步加载商品 ，通过ajax回传商品returnData.length设置循环i的长度，将i加入商品行各项属性的命名中，以便于后台分别取值;并在循环追加商品tr-td时，统计i赋值次数counti，加入ajax参数，后台将counti作为命名参数i的最大值，循环取出全部tr-td商品属性值 */

	function newGoods() {
		var counti = 0;
		var goods = document.getElementById("goods");
		$("#goods").html("");
		 $("#sub").html(""); 
		$
				.getJSON(
						"servlet/getGoodsByPid.do",
						"pid=" + $("#provider").val(),
						function(returnData) {

							$("#goods")
									.append(
											"<tr style='height:35px;' class='tr'><td   class='td'><b>商品名称</b></td><td class='td'><b>单价（元）</b></td><td class='td'><b>单位</b></td><td  class='td'><b>数量</b></td><td class='td'><b>合计（元）</b></td></tr>");
							for ( var i = 0; i < returnData.length; i++) {
				
								counti = counti + 1;

								$("#goods")
										.append(
												"<tr  class='tr'><td  class='td'><input type='hidden'  name='gid"+i+"' value='"+returnData[i].gid+"'/><input class='input-name' style='outline:none;' id='gname"+i+"' name='gname"+i+"' readonly='readonly' type='text' value='" + returnData[i].gname
												+ "'/></td><td  class='td'><input class='input-price' type='text' id='price"+i+"' readonly='readonly' name='price"+i+"' value='"+returnData[i].price+"'/></td><td>"
														+ returnData[i].unit
														+ "</td><td  class='td'><input onclick='delOne("
														+ i
														+ ");' id='1input"
														+ i
														+ "' name='1input"
														+ i
														+ "' type='button' style='width:19px;' value=' - '/><input  onchange='compute("
														+ i
														+ ");' id='num"
														+ i
														+ "'  class='input-num' name='num"
														+ i
														+ "'  value='0'/><input onclick='addOne("
														+ i
														+ ");' id='2input"
														+ i
														+ "' name='2input"
														+ i
														+ "' type='button' value='+'/></td><td class='td' id='3td"+i+"' name='3td"+i+"'><input id='amount"+i+"' name='amount"+i+"' type='text' readonly='readonly' class='input-amount' value='0'/></td></tr>");

							}
							$("#sub")
									.append(
											"<tr id='sub'><td style='text-align:center;' colspan='2'  class='field'><input onclick='toSubmit("
													+ counti
													+ ");' type='button' value='提交'/>&nbsp;&nbsp;<input type='button' value='返回' /></td></tr></form>");
						});
	}

//减少商品数量按钮onclick-action

function delOne(i) {
		if ($("#num" + i).val() > 0) {
			$("#num" + i).val($("#num" + i).val() - 1);
			compute(i);
		}

	}

//增加商品数量按钮onclick-action

	function addOne(i) {

		$("#num" + i).val(parseInt($("#num" + i).val()) + 1);
		compute(i);

	}

//某商品行商品数量改变时，计算该行金额

	function compute(i) {
		var num = $("#num" + i).val();
		var price = $("#price" + i).val();
		$("#amount" + i).val((num * price).toFixed(2));
		computeAll();

	}

//某商品行商品数量改变时，计算本订单总金额

function computeAll() {
		var totalamount = 0;
		$(".input-amount").each(function() {

			totalamount = parseFloat(totalamount) + parseFloat($(this).val());
		});
		$("#totalamount").val(totalamount.toFixed(2));
	}

	$(function() {
		$("#pdtr").hide();
	});

//如果未付款，隐藏付款时间DatePicker；否则显示之

	function ispaydate() {

		if ($("#ispaid").val() == 1) {
			$("#pdtr").show();
		} else {
			$("#pdtr").hide();
		}
	}

//提交表单

	function toSubmit(counti) {

		$("#counti").val(counti);
		$("#form").submit();
	}

//在servlet中，对账单数据进行条件甄选（商品num是否为0）封装传入下一环节进行处理

request.setCharacterEncoding("utf-8");
		int result;
		BillBiz bb;
		BillItem bi;
		Bill b;
		List<BillItem> biList;
		List<Bill> bList;
		long aid;
		long pid;
		long gid;
		int gcount;
		double amount;
		String btime;
		int isPaid;
		double totalAmount;
		String payDate;
		bList = new ArrayList<Bill>();
		aid = Long.parseLong(request.getParameter("area"));

		pid = Long.parseLong(request.getParameter("provider"));
		btime = request.getParameter("btime");

		isPaid = Integer.parseInt(request.getParameter("ispaid"));
		totalAmount = Double.parseDouble(request.getParameter("totalamount"));
		payDate = request.getParameter("paydate");
		b = new Bill();
		b.setBtime(btime);
		b.setIsPaid(isPaid);
		b.setPayDate(payDate);
		b.setPid(pid);
		b.setTotalAmount(totalAmount);

		int i = Integer.parseInt(request.getParameter("counti"));
		biList = new ArrayList<BillItem>();
		for (int j = 0; j < i; j++) {

			gid = Long.parseLong(request.getParameter("gid" + j));
			gcount = Integer.parseInt(request.getParameter("num" + j));
			amount = Double.parseDouble(request.getParameter("amount" + j));

			if (gcount != 0) {
				bi = new BillItem();
				bi.setGid(gid);
				bi.setGcount(gcount);
				bi.setAmount(amount);
				biList.add(bi);
			}
		}
		b.setBiList(biList);
		bb = new BillBiz();
	result=bb.addBills(b);
	request.setAttribute("result", result);
		request.getRequestDispatcher("getBills.do").forward(request, response);