js操作多重报表 _JavaScript

js操作多重表格

<html>

<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+'" onkeyup="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+'" onkeyup="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; // 得到ｔｒ对象
??? ??? ??? 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; // 得到ｔｒ对象
??????? ??? ???
?????? ??? ??? ?　??? 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();
??????? }