js操作多重表格

<html>

<style>
.list{height:20px; border:1px solid gray; border-bottom:0px;  }
.list tr td{ border-bottom:1px solid gray; padding: 5px 5px 5px 5px; }
</style>     

<body>

  <div>
            <table class="list">
                <thead>
                    <tr>
                        <td>商户名称</td>
                        <td>商户订单状态</td>
                        <td>物流单号</td>
                        <td>商户订单合计</td>
                    </tr>
                </thead>
                <tbody id="prodListTable" class="list">
                </tbody>
            </table>
        </div>

 </body>

</html>

 

 function showProd(storeId,storeName,prodId,prodName,salePrice,buyNum,stockNum, prodAttrId,prodAttrStringList){

            console.log("storeId=="+storeId);
             console.log("storeName=="+storeName);
             console.log("prodId=="+prodId);
             console.log("prodName=="+prodName);
             console.log("salePrice=="+salePrice);
             console.log("buyNum=="+buyNum);
             console.log("stockNum=="+stockNum);
             console.log("prodAttrId=="+prodAttrId);
             prodAttrStringList = prodAttrStringList.replace(/null/g,''); 
          
             var t=document.getElementById("prodListTable");  //获取Table
            var storeIdFlag = 0;
            var storeIdIndex =0;
            var length= t.rows.length;          //获得Table下的行数
            if(length!=0){              //  如果已经有商户了,就循环判断有没有相同的商户
                for(var i=0;i<length;i++) 
                { 
                    var _tr = t.rows[i];
                    var _pIdValue = _tr.id;
                    if (storeId == _pIdValue){  //判断有没有这个商户  第一层table里面判断
                        storeIdFlag =1;
                        storeIdIndex = i;
                        break;
                    }
                }
        }

 

       if (storeIdFlag==1){ // 表示已经有这个商户了
                        // 得到商品的列表tbody
                       var _body = t.rows[storeIdIndex].cells[4].childNodes[0].childNodes[0];  // 第5列
                       
                        //判断商品是否存在
                        var prodIdFlag = 0;
                        var prodIdIndex =0;
                        var length= _body.rows.length;          //获得Table下的行数
                        if(length!=0){              //
                            for(var i=0;i<length;i++) 
                            { 
                                var prodIdOld = _body.rows[i].id;
                                var prodAttrIdOld = _body.rows[i].cells[3].childNodes[0].value;
                            
                                if (prodIdOld == prodId  && prodAttrIdOld==prodAttrId){  //这个地方是通过2个列值来判断是否有相同的行
                                    prodIdFlag =1;
                                    prodIdIndex = i;
                                    break;
                                }
                            }
                        }
                       
                        if (prodIdFlag ==1){   // 如果已经有这个商品了  todo
                               alert('如果已经有该属性商品了!');
                               return false;
                        }else  { 
                            var totalPrice = salePrice * buyNum;
                            var c5Html = '';
                            c5Html += '<td>'+prodId+'</td>';
                            c5Html += '<td>'+prodName+'</td>';
                            c5Html += '<td>'+prodAttrStringList+'</td>';
                            c5Html += '<td><input type="text" readonly="readonly" style ="width:60px;" value="'+prodAttrId+'" /></td>';
                            c5Html += '<td>'+stockNum+'</td>';
                            c5Html += '<td>'+salePrice+'</td>';
                            c5Html += '<td><input id="buyNum" style ="width:60px;" name="buyNum_'+storeId+'" value="'+buyNum+'" οnkeyup="buyNumChange(this); "/></td>';
                           
                            c5Html += '<td>'+totalPrice+'</td>';
                            c5Html += '<td><a href="#" onClick="deleteRow(this)" >删除</a></td>';
                           
                            var _trLast = _body.insertRow();
                            _trLast.id = prodId;
                            _trLast.innerHTML = c5Html;
                           
                            var _ptr4  = t.rows[storeIdIndex].cells[3];  // 第4列
                            var oldStoreTotalPrice = _ptr4.innerHTML;
                            var StoreTotalPrice =  parseInt(oldStoreTotalPrice) + totalPrice;
                            _ptr4.innerHTML = StoreTotalPrice;
                        }
            }else {  // 没有这个商户的情况
                    var r = t.insertRow();
                    r.id = storeId;    //设置行的id
                    var c1 = r.insertCell();    // 商户名称

                    c1.innerHTML = storeName;
                    var c2 = r.insertCell();
                    var c3 = r.insertCell();
                    var c4 = r.insertCell(); //商户订单合计
                    c4.innerHTML = 0;
                   
                    var c5 = r.insertCell();     //在第5列构建里面的table
                    var c5Html = '<table  class="list">';
                    c5Html += '<tr><td  >商品ID</td>';
                    c5Html += '<td >商品详细名称</td>';
                    c5Html += '<td  >商品属性</td>';
                    c5Html += '<td >商品属性ID</td>';
                    c5Html += '<td  >库存数量</td>';
                    c5Html += '<td  >单价</td>';
                    c5Html += '<td  >数量</td>';
                    c5Html += '<td   >总价</td>';
                    c5Html += '<td  >操作</td></tr>';
                   
                    c5Html += '<tr id="'+prodId+'"><td>'+prodId+'</td>';
                    c5Html += '<td>'+prodName+'</td>';
                    c5Html += '<td>'+prodAttrStringList+'</td>';
                    c5Html += '<td><input readonly="readonly" type="text" style ="width:60px;" value="'+prodAttrId+'"  /></td>';
                    c5Html += '<td>'+stockNum+'</td>';
                    c5Html += '<td>'+salePrice+'</td>';
                    console.log(buyNum);
                    c5Html += '<td><input style ="width:60px;" id="buyNum" name="buyNum_'+storeId+'" value="'+buyNum+'" οnkeyup="buyNumChange(this); "/></td>';
                   
                    var totalPrice = salePrice * buyNum;
                    c4.innerHTML = totalPrice;
                   
                    c5Html += '<td>'+totalPrice+'</td>';
                    c5Html += '<td><a href="#" onClick="deleteRow(this)" >删除</a></td> </tr>';
                    c5Html += '</table>';
                    c5.innerHTML=c5Html;
            }
        }

        //执行上面的删除操作

        function deleteRow(obj){
            var _tr=obj.parentNode.parentNode; // 得到tr对象
            var _trIndex=_tr.rowIndex; // 
           
          var _td6 = _tr.childNodes[5];
            var oldTotalPrice = _td6.innerHTML;
           
            var _tbody = _tr.parentNode;
            _tbody.deleteRow(_trIndex);  
           
            var _pTr = _tbody.parentNode.parentNode.parentNode;
            var _rowsLength = _tbody.rows.length;
            if (_rowsLength==1){  // 已经删除了所以的商品
                _pTr.parentNode.removeChild(_pTr);
            }
             //
             var _pTd4 = _pTr.childNodes[3];
             var storeTotalPrice = _pTd4.innerHTML;
             var storeTotalPriceInt = parseInt(storeTotalPrice);
             storeTotalPriceInt = storeTotalPriceInt - parseInt(oldTotalPrice);
             _pTd4.innerHTML = storeTotalPriceInt;
        }

 

        //修改数量
        function buyNumChange(obj){
                var buyNum = obj.value;
                var _tr=obj.parentNode.parentNode; // 得到tr对象
               
                     var rowIndex=_tr.rowIndex; // 
                     var CellIndex=obj.parentNode.cellIndex;
                 
                     var _td6 = _tr.childNodes[5];
                var salePrice = _td6.innerHTML;
                var totalPrice = parseInt(salePrice) * buyNum;
               
                var _td8 = _tr.childNodes[7];
                var oldTotalPrice = _td8.innerHTML;
                _td8.innerHTML = totalPrice;  //总价
               
                 //
                 var  _tbody = _tr.parentNode;
                 var _pTr = _tbody.parentNode.parentNode.parentNode;
                 var _pTd4 = _pTr.childNodes[3];
                 
                 var storeTotalPrice = _pTd4.innerHTML;
               
                 var storeTotalPriceInt = parseInt(storeTotalPrice);
                 storeTotalPriceInt = storeTotalPriceInt - parseInt(oldTotalPrice);
                 storeTotalPriceInt = storeTotalPriceInt + totalPrice;
                
                 _pTd4.innerHTML = storeTotalPriceInt;
        }

 

       //遍历 table表格的值,提交到后台

        function formSubmit() {
            //遍历 table表格    
            var _prodListTable=document.getElementById("prodListTable");  //获取Table
             
            var _array = new Array();
            for(var i=0;i<_prodListTable.rows.length;i++){ 
                var _pjson = new Object();
                var _prows = _prodListTable.rows[i];
                _pjson.storeId = _prows.id;
                _pjson.storeName = _prows.cells[0].innerHTML;
                _pjson.storeOrderState = _prows.cells[1].innerHTML;
                _pjson.wuliuNo = _prows.cells[2].innerHTML;
                _pjson.storeOrderTotal =_prows.cells[3].innerHTML;
               
                var _array2 = new Array();
                var _table = _prows.cells[4].childNodes[0]; // 得到商品的列表 _table  
              
                for(var j=1;j<_table.rows.length;j++){    // 注意这个地方要去除首行的值
                    var _cjson = new Object();
                    _cjson.prodId = _table.rows[j].cells[0].innerHTML;
                    _cjson.prodName = _table.rows[j].cells[1].innerHTML;
                    _cjson.prodAttrStringList = _table.rows[j].cells[2].innerHTML;
                    _cjson.prodAttrId = _table.rows[j].cells[3].childNodes[0].value;
                    _cjson.stockNum = _table.rows[j].cells[4].innerHTML;
                    _cjson.salePrice = _table.rows[j].cells[5].innerHTML;
                    _cjson.buyNum = _table.rows[j].cells[6].childNodes[0].value;
                    _cjson.totalPrice = _table.rows[j].cells[7].innerHTML;
                    _array2.push(_cjson);
                }
                _pjson.prodList = _array2;
                _array.push(_pjson);
            } 
       
            if(_array==null || _array.length ==0 ){
                 alert(content:'请添加商品信息!' );
                  return false;
            }
            //JSON.stringify 将JSON转为字符串格式 , JSON.parse(string)将字符串转为JSON格式;
            document.getElementById('prodDetailList').value = JSON.stringify(_array);
            document.getElementById("form1").submit();
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值