JQuery动态增加删除表格，计算总价

<table id="treeTable"  class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable" >
	<thead>
		 <tr>
			<th class="td_Num">序号</th>
			<th class="td_Item">物品名称</th>
			<th class="td_Item">品牌</th>
			<th class="td_Item">规格型号</th>
			<th class="td_Item">数量</th>
			<th class="td_Item">预算单价</th>
			<th class="td_Item">预算总价</th>
			<th class="td_Item">用途</th>
			<th class='td_Oper'>相关操作</th>
		 </tr>
	</thead>
	<tbody id="treeTableList">
	

<span style="white-space:pre">	</span></tbody>
	<tbody id="Total">
		<tr>
			<th>合计</th>
			<th>小写</th>
			<th colspan="3"><input id="budgetCost" name="budgetCost" readonly="readonly" class="form-control "/></th>
			<th>大写</th>
			<th colspan="3"><input id="Capital" readonly="readonly" class="form-control "/></th>
		</tr>
	</tbody>
</table>

JQuery   动态增加

<span style="font-size:14px;">//添加新记录
		    $("#bu").click(function(){
		        var max_line_num = $("#treeTableList tr").length;
		        //比如说：sq[0].goodsName  sq[1].goodsName 
		        $("#treeTableList").append(
			        "<tr id='sq[" + (max_line_num) + "]'>" +
			        	"<td class='td_Num'><input type='checkbox' class='i-checks' name='sq[" +  (max_line_num) + "].id' id='sq[" +  (max_line_num) + "].id'></td>" + 
			        	"<td class='td_Item'><input type='text' name='sq[" + (max_line_num) + "].goodsName' id='sq[" +  (max_line_num) + "].goodsName'></input></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (max_line_num) + "].Brand' id='sq[" +  (max_line_num)+ "].Brand'></input></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (max_line_num) + "].Specifications' id='sq[" + (max_line_num) + "].Specifications'></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (max_line_num) + "].num' value='1' id='sq[" +  (max_line_num)+ "].num'></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (max_line_num) + "].price'  value='0' id='sq[" +  (max_line_num)+ "].price'></td>" +
			            "<td class='td_Item'><input type='text' class='sum' id='sq[" + (max_line_num) + "].sum' ></td>" +
			            "<td class='td_Item'><textarea class='form-control' rows='3' name='sq[" + (max_line_num) + "].Purpose' id='sq[" +  (max_line_num)+ "].Purpose'></textarea></td>" +
			            "<td class='td_Oper'><a href='#' οnclick='deltr("+(max_line_num)+")'>删除</a></td>" +
			        "</tr>");
			    });
		    
		   
		    // 当鼠标失去焦点时触发 
		    $("#treeTableList").on("blur","tr",function(){ 
		    	var id = $(this).attr("id");
		    	var num = document.getElementById(id+".num").value;
		    	var price = document.getElementById(id+".price").value;		    	
		    	document.getElementById(id+".sum").value = parseFloat(num) * parseFloat(price);
		    	
		    	var sumprice = 0;
		    	$(".sum").each(function(){
		    		var numPallets = $(this).val();
		    		sumprice = sumprice+parseFloat(numPallets);
		    	});
		    	
		    	$("#budgetCost").val(sumprice);
		    	$("#Capital").val(chineseNumber(sumprice));
		    });</span><span style="font-size:18px;"> </span>

动态删除

//动态删除<tr/>
	    function deltr(index){
	       var _len = $("#treeTableList tr").length;
	       $("tr[id='sq[" + index + "]']").remove();//删除当前行
	        for(var i=index+1,j=_len;i<j;i++){
	            var nextTxtVal = $("#desc"+(i)).val();
	           $("tr[id='sq[" + i + "]']").replaceWith(
	        		   "<tr id = 'sq[" + (i-1) + "]'>" +
			        	"<td class='td_Num'><input type='checkbox' class='i-checks' name='sq[" +  (i-1) + "].id' id='sq[" +  (i-1) + "].id'></td>" + 
			        	"<td class='td_Item'><input type='text' name='sq[" + (i-1) + "].goodsName' id='sq[" +  (i-1) + "].goodsName'></input></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (i-1) + "].Brand' id='sq[" +  (i-1)+ "].Brand'></input></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (i-1) + "].Specifications' id='sq[" + (i-1) + "].Specifications'></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (i-1) + "].num' class='num' value='1' id='sq[" +  (i-1)+ "].num'></td>" +
			            "<td class='td_Item'><input type='text' name='sq[" + (i-1) + "].price' class='price' value='0' id='sq[" +  (i-1)+ "].price'></td>" +
			            "<td class='td_Item'><input type='text' class='sum' id='sq[" + (i-1) + "].sum' ></td>" +
			            "<td class='td_Item'><textarea class='form-control' rows='3' name='sq[" + (i-1) + "].Purpose' id='sq[" +  (i-1)+ "].Purpose'></textarea></td>" +
			            "<td class='td_Oper'><a href='#' οnclick='deltr("+(i-1)+")'>删除</a></td>" +
			        "</tr>");
	        }
	   }

直接从数据库获取已有数据显示

<table id="treeTable"  class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable" >
	<thead>
		<tr>
			<th class="td_Num"><input type="checkbox" class="i-checks"></th> 
		<span style="white-space:pre">	</span><th class="td_Item">物品名称</th>
			<th class="td_Item">品牌</th>
			<th class="td_Item">规格型号</th>
			<th class="td_Item">数量</th>
			<th class="td_Item">预算单价</th>
			<th class="td_Item">预算总价</th>
			<th class="td_Item">用途</th>
			<th class='td_Oper'>相关操作</th>
		</tr>
	</thead>
	<tbody id="treeTableList">
		<c:forEach items="${list }"  var="oa" varStatus="op">
		<tr id="sq[${op.count-1 }]">
			<td class='td_Num'><input type="checkbox" class="i-checks" name="sq[${op.count-1 }].id" id="sq[${op.count-1 }].id" value="${op.count-1 }"></td> 
			<td class='td_Item'><input value="${oa.goodsName }" name="sq[${op.count-1 }].goodsName" id ="sq[${op.count-1 }].goodsName" /></td>
			<td class='td_Item'><input value="${oa.brand }" name="sq[${op.count-1 }].brand" id ="sq[${op.count-1 }].brand"/></td>
			<td class='td_Item'><input value="${oa.specifications }" name="sq[${op.count-1 }].specifications" id ="sq[${op.count-1 }].specifications"/></td>
			<td class='td_Item'><input class="num" value="${oa.num }" name="sq[${op.count-1 }].num" id ="sq[${op.count-1 }].num"/></td>
			<td class='td_Item'><input class="price" value="${oa.price }" name="sq[${op.count-1 }].price"  id ="sq[${op.count-1 }].price"/></td>
			<td class='td_Item'><input class='sum' id='sq[${op.count-1 }].sum' ></td>
			<td class='td_Item'><input value="${oa.purpose }" name="sq[${op.count-1 }].purpose" id ="sq[${op.count-1 }].purpose"/></td>
			<td class='td_Oper'><a href="#" οnclick="deltr(${op.count-1})">删除</a></td>
			<input  type="hidden" id="sq[${op.count-1 }].purchaseId" name="sq[${op.count-1 }].purchaseId" value="${oaPurchase.code }"/>
			<input  type="hidden" id="sq[${op.count-1 }].id" name="sq[${op.count-1 }].id" value="${oa.id }"/>
										        
		</tr>
		</c:forEach>
	</tbody>
	<tbody id="Total">
		<tr>
			<th>合计</th>
			<th>小写</th>
			<th colspan="3"><form:input path="budgetCost" id="budgetCost" name="budgetCost" readonly="readonly" class="form-control "/></th>
			<th>大写</th>
			<th colspan="3"><input id="Capital" readonly="readonly" class="form-control "/></th>
		</tr>
	</tbody>
</table>

记录笔记，好记性不如烂笔头。。。