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='#' onclick='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='#' onclick='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="#" onclick="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>

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