DOM节点的基本使用以及数据转成JSON

最新推荐文章于 2023-09-19 16:13:16 发布

chen__yuan

最新推荐文章于 2023-09-19 16:13:16 发布

阅读量1.7k

点赞数

分类专栏： JQuery spring MVC 文章标签： dom json

本文链接：https://blog.csdn.net/chen__yuan/article/details/53750677

版权

spring MVC 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

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 ));
    })
});