DOM节点的基本使用以及数据转成JSON
1、jsp页面代码
<a data-toggle="modal" data-target="#myModal3" >添加商品</a>
<table class="table table-bover" id="dd">
<tr>
<td ><label>物品名称</label></td>
<td ><label>物品品名</label></td>
<td ><label>物品重量</label></td>
<td ><label>物品单价(RMB)</label></td>
<td ><label>物品数量</label></td>
<td ><label>物品总价</label></td>
<td ><label>物品规格</label></td>
<td ><label>物品计量单位名称</label></td>
<td ><label>物品HS</label></td>
<td ><label>操作</label></td>
</tr>
</table>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:60%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
添加商品
</h4>
<a ng-click="getGoods_list()" data-toggle="modal" data-target="#myModal2" >(常用商品)</a>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品名称</label></td>
<td style="padding:2px 6px;"><input type="text" class="form-control" required="required" name="itemName" style="width:90%;display:inline;height:28px;" /></td>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品品名</label></td>
<td style="padding:2px 6px;"><input type="text" class="form-control " name="itemType" required="required" style="width:90%;display:inline;height:28px;" /></td>
</tr>
<tr>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品重量</label></td>
<td style="padding:2px 6px;"><input type="number" class="form-control " name="itemWeight" required="required" style="width:90%;display:inline;height:28px;" /></td>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品单价(RMB)</label></td>
<td style="padding:2px 6px;"><input type="number" class="form-control " name="unitPrice" required="required" style="width:90%;display:inline;height:28px;" /></td>
</tr>
<tr>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品数量</label></td>
<td style="padding:2px 6px;"><input type="number" class="form-control " name="itemCount" required="required" style="width:90%;display:inline;height:28px;" onblur="calAllprice(this)" /></td>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品总价</label></td>
<td style="padding:2px 6px;"><input type="text" class="form-control " name="allPrice" required="required" style="width:90%;display:inline;height:28px;" /></td>
</tr>
<tr>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品规格</label></td>
<td style="padding:2px 6px;"><input type="text" class="form-control " name="itemSpecificatio" required="required" style="width:90%;display:inline;height:28px;" /></td>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品计量单位名称</label></td>
<td style="padding:2px 6px;"><input type="text" class="form-control " name="itemSku" style="width:90%;display:inline;height:28px;" required="required" /></td>
</tr>
<tr>
<td style="padding:2px 6px;"><span style="color:red;">* </span><label>物品HS</label></td>
<td style="padding:2px 6px;">
<input type="text" class="form-control " name="itemHS" required="required" style="width:90%;display:inline;height:28px;" />
</td>
<td><a onclick="createTable()" >添加商品</a></td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="addGoods()" >添加
</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.myModal3 -->
2、js代码–生成dom节点
$scope.addGoods=function(){
itemName = $("input[name='itemName']").val();
itemType = $("input[name='itemType']").val();
itemWeight = $("input[name='itemWeight']").val();
unitPrice = $("input[name='unitPrice']").val();
itemCount = $("input[name='itemCount']").val();
allPrice = $("input[name='allPrice']").val();
itemSpecificatio = $("input[name='itemSpecificatio']").val();
itemSku = $("input[name='itemSku']").val();
itemHS = $("input[name='itemHS']").val();
var table = document.getElementById("dd");
var tr = document.createElement("tr");
table.appendChild(tr);
var td1 = document.createElement("td");
tr.appendChild(td1);
td1.innerHTML = "<td >"+itemName+"</td>";
var td2 = document.createElement("td");
tr.appendChild(td2);
td2.innerHTML = "<td >"+itemType+"</td>";
var td3 = document.createElement("td");
tr.appendChild(td3);
td3.innerHTML = "<td >"+itemWeight+"</td>";
var td4 = document.createElement("td");
tr.appendChild(td4);
td4.innerHTML = "<td >"+unitPrice+"</td>";
var td5 = document.createElement("td");
tr.appendChild(td5);
td5.innerHTML = "<td><input type='number' class='form-control' name='itemCount' value='"+itemCount+"'style='width:50%;display:inline;height:28px;padding:0px;margin:0px;' /></td>";
var td6 = document.createElement("td");
tr.appendChild(td6);
td6.innerHTML = "<td><input type='number' class='form-control' name='allPrice' value='"+allPrice+"'style='width:50%;display:inline;height:28px;padding:0px;margin:0px;' /></td>";
var td7 = document.createElement("td");
tr.appendChild(td7);
td7.innerHTML = "<td >"+itemSpecificatio+"</td>";
var td8 = document.createElement("td");
tr.appendChild(td8);
td8.innerHTML = "<td >"+itemSku+"</td>";
var td9= document.createElement("td");
tr.appendChild(td9);
td9.innerHTML = "<td >"+itemHS+"</td>";
var td10= document.createElement("td");
tr.appendChild(td10);
td10.innerHTML = "<td ><button type='button' class='btn btn-danger btn-sm ' onclick='deleteGoods(this)' >删除</button></td>";
};
3、js–删除dom节点
function deleteGoods(obj){
$(obj).parent("td").parent("tr").remove();
}
4、js–form表单提交得到dom节点里面的值,转成JSON格式
//JS 里面是不需要参数属性的
function CreateJson(itemName,itemType,itemWeight,unitPrice,itemCount,allPrice,itemSpecificatio,itemSku,itemHS){
var jsonStr = {};
jsonStr.itemName = itemName;
jsonStr.itemType = itemType;
jsonStr.itemWeight = itemWeight;
jsonStr.unitPrice = unitPrice;
jsonStr.itemCount = itemCount;
jsonStr.allPrice = allPrice;
jsonStr.itemSpecificatio = itemSpecificatio;
jsonStr.itemSku = itemSku;
jsonStr.itemHS = itemHS;
return jsonStr;
}
$(function(){
$("#orderAddForm").submit(function(e){
e.preventDefault();
var jsons=[];//空JSON数组集
var trs = document.getElementById("dd").getElementsByTagName("tr");
for(var i = 1; i < trs.length; i++){
var tds = trs[i].children;
var itemName = tds[0].innerHTML;
var itemType = tds[1].innerHTML;
var itemWeight = tds[2].innerHTML;
var unitPrice = tds[3].innerHTML;
var itemCount = tds[4].children[0].value;
var allPrice = tds[5].children[0].value;
var itemSpecificatio = tds[6].innerHTML;
var itemSku = tds[7].innerHTML;
var itemHS = tds[8].innerHTML; jsons.push(CreateJson(itemName,itemType,itemWeight,unitPrice,itemCount,allPrice,itemSpecificatio,itemSku,itemHS));
}
alert(JSON.stringify(jsons ));
})
});